CSS中:before和:after伪元素使用的奇技淫巧

下面是CSS中:before和:after伪元素使用的奇技淫巧的完整攻略。

什么是:before和:after伪元素

在CSS中，有两个伪元素:before和:after。它们可以在一个元素之前或之后插入一些内容，而这些内容是由CSS来定义的。这些伪元素可以被用来实现很多有趣的效果，如图标、装饰性的线条、制作更好的复选框/单选框等等。

如何使用:before和:after伪元素

:after和:before伪元素的语法如下：

element:after {
    /* CSS规则 */
}

element:before {
    /* CSS规则 */
}

其中，element是CSS选择器，可以是任何HTML元素。在:before和:after中定义的CSS规则将会应用于元素的伪元素，而不是元素本身。

下面是两个例子，演示如何使用这些伪元素的：

1. 实现带图标的列表项

<ul>
    <li><span>项目1</span></li>
    <li><span>项目2</span></li>
    <li><span>项目3</span></li>
</ul>

li {
    list-style: none;
    position: relative;
    padding-left: 20px;
}

li:before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: #333;
}

li span {
    display: inline-block;
    margin: 0;
    padding: 0;
}

在这个例子中，我们使用:before伪元素来添加一个小圆点，来代表每个列表项。使用position: absolute和left: 0来让圆点紧贴在列表项的左侧。我们使用:before伪元素而不是在每个元素前面都放置一个元素，以便于控制它们的样式。

2. 实现可定制的复选框

<input type="checkbox" class="custom-checkbox" />
<label for="custom-checkbox">这是一个复选框</label>

.custom-checkbox {
    display: none;
}

.custom-checkbox + label:before {
    display: inline-block;
    content: " ";
    background-image: url(checkmark.png);
    background-repeat: no-repeat;
    background-position: center center;
    width: 20px;
    height: 20px;
    margin-right: 10px;
    vertical-align: middle;
}

.custom-checkbox:checked + label:before {
    background-image: url(checkmark-checked.png);
}

在这个例子中，我们使用:before伪类来实现一个可定制的复选框。我们首先隐藏了原始复选框（.custom-checkbox {display: none}），然后使用:before伪元素添加了一个图标，表示它是一个复选框。当复选框被选中时，我们通过将background-image设置为另一个图标来更改图标的外观。

总结

使用:before和:after伪元素可以让我们在不使用额外HTML标签的前提下，实现很多有趣的效果。我们可以根据自己的需要定制伪元素的样式和位置，带给用户更好的体验。