CSS中的after选择器的应用

最新推荐文章于 2022-07-19 11:38:23 发布

qq_42933029

最新推荐文章于 2022-07-19 11:38:23 发布

阅读量250

点赞数

分类专栏：前端

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

版权

前端专栏收录该内容

1 篇文章 0 订阅

订阅专栏

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>