彩色点 :before 和 :after h2答案

【问题标题】：Colored Dots :before and :after h2彩色点 :before 和 :after h2
【发布时间】：2013-12-14 03:19:26
【问题描述】：

我正在尝试在 h2 之前和之后放置彩色点。

这是我的 CSS；

h2:after {
 width:10px;
 height:10px;
 border-radius:50%;
 background: #b83b3b;
}

h2:after {
 width:10px;
 height:10px;
 border-radius:50%;
 background: #b83b3b;
}

但没有出现点。

有什么线索吗？

谢谢！

在恩

【问题讨论】：

什么样的彩色圆点？像“...”？
使用这个content:'.'属性。

标签： css pseudo-element

【解决方案1】：

为content属性指定一个值，然后添加display:inline-block

jsFiddle example

h2:after, h2:before {
    content:"\A";
    width:10px;
    height:10px;
    border-radius:50%;
    background: #b83b3b;
    display:inline-block;
}

【讨论】：

您可以指定一个空字符串 - 它不必由空格组成（尽管如果它是唯一的内容，空格无论如何都会被折叠）。当您忽略指定值content 时，使用的初始值是none，它类似于空值，因此与空字符串不同。

【解决方案2】：

我只是想添加一种我正在使用的替代方式 - 这是对 Josh 的回答的不同看法，它使用了一个实际的点字符，如果你愿意，它允许你使用 text-shadow 和其他文本样式。我认为垂直居中也更容易（在我看来）。我在文本阴影上添加了一个漂亮的发光效果，因为我用它来指示状态。

jsFiddle example

h2:after, h2:before {
    content: "•";
    color: #b83b3b;
    text-shadow: #b83b3b 0 0 5px;
    margin:0 10px;
}

【讨论】：