css中多个class使用了after如何去掉最后一个after内容
时间: 2024-02-04 22:04:15 浏览: 32
如果多个class都设置了`:after`伪元素,并且要去掉最后一个`:after`伪元素的内容,您需要使用相同的选择器来选中这些元素,然后再使用`:not(:last-child)`来去掉最后一个元素的内容。以下是一个示例代码:
```css
/* 选中所有设置了 ::after 的元素 */
.class1::after, .class2::after, .class3::after {
content: '...';
}
/* 去掉最后一个元素的内容 */
.class1::after:not(:last-child),
.class2::after:not(:last-child),
.class3::after:not(:last-child) {
content: '';
}
```
这段代码中,我们先选中所有设置了`:after`伪元素的元素,并将它们的`content`属性设置为需要的内容。然后,我们再使用`:not(:last-child)`选择器来选中所有不是最后一个元素的`:after`伪元素,并将它们的`content`属性设置为空。这样就可以去掉最后一个元素的内容了。
相关问题
怎么在div::after中添加一个font-class图标
可以在 `content` 属性中使用 Unicode 编码来添加字体图标。Font Awesome 使用的 Unicode 编码可以在它的网站上找到。例如,搜索图标的 Unicode 编码为 `f002`。
示例代码如下:
```css
div::after {
font-family: "Font Awesome 5 Free";
content: "\f002";
}
```
上述代码会在每个 `div` 元素的内容后面添加一个搜索图标。需要注意的是,你需要指定正确的字体名称,以及正确的 Unicode 编码。另外,为了让图标正常显示,你需要将 `display` 属性设置为 `inline-block`,并设置其宽度和高度。
完整的代码如下:
```html
<!-- 引入 Font Awesome 字体库 -->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.3/css/all.css">
<!-- 添加搜索图标 -->
<div>
搜索
<span class="search-icon"></span>
</div>
<style>
.search-icon::after {
font-family: "Font Awesome 5 Free";
content: "\f002";
display: inline-block;
width: 16px;
height: 16px;
margin-left: 5px;
}
</style>
```
上述代码会在一个 `div` 元素内添加一个文本和一个搜索图标。你可以根据实际情况进行调整。
使用css中的伪元素画一个十字
可以使用CSS伪元素before和after来实现一个十字的效果,以下是示例代码:
```html
<div class="cross"></div>
```
```css
.cross {
position: relative;
width: 100px;
height: 100px;
}
.cross::before,
.cross::after {
content: '';
position: absolute;
top: 50%;
left: 0;
width: 100%;
height: 2px;
background-color: black;
}
.cross::before {
transform: translateY(-50%);
}
.cross::after {
transform: translateY(-50%) rotate(90deg);
}
```
解释一下代码:
首先,我们创建一个大小为100x100的容器,然后将其定位为相对位置。
接下来,我们使用before和after伪元素来创建两条水平和垂直的线段。这里我们将它们的内容设为一个空字符串,并让它们绝对定位在容器中间。
由于我们希望两条线段垂直于彼此,我们需要将其中一条线段旋转90度。这里我们使用CSS的rotate函数来实现。
最后,我们可以通过调整容器的大小来调整十字的大小。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)