CSS中的after选择器的应用

1.简单看一个after选择器的例子

p:after
{
content:"- 注意我";
}

我的名字是 Donald

我住在 Ducksburg

上面的伪代码显示的效果为：我的名字是 Donald-注意我我住在 Ducksburg-注意我

2.利用after选择器写一个小三角形

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<style>
.demo:after{
    content: '';
    display: inline-block;
    width: 0;
    height: 0;
    border: 8px solid transparent;
   border-top: 8px solid #AFABAB;
    position: relative;
    top: 2px;
    left: 10px;
}
</style>
<body>
<div class="demo"></div>
</body>
</html>

显示一个倒三角：
在这里插入图片描述
由此可以说明：虽然div是一个块级元素，但是after伪选择器却能将内容显示在块级元素的右边

来源：CSDN

作者：qq_42933029

链接：https://blog.csdn.net/qq_42933029/article/details/103897178

标签

css选择器

css

易学教程内所有资源均来自网络或用户发布的内容，如有违反法律规定的内容欢迎反馈！
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!