初步认识常用两伪元素:before和:after

最新推荐文章于 2022-12-30 19:47:37 发布

iuukai

最新推荐文章于 2022-12-30 19:47:37 发布

阅读量296

点赞数

分类专栏： CSS

本文链接：https://blog.csdn.net/weixin_45389633/article/details/104328401

版权

CSS 专栏收录该内容

22 篇文章 1 订阅

订阅专栏

一、【要点】使用伪元素`:before`和`:after`时，必须设置`content: '';`属性，可空值，否则无效：

在这里插入图片描述

二、【坑】行内元素的`:before`，属性`content: '';`为空值时，无效（还未找到原理，只能尽量用块级元素来设置伪元素了）：

在这里插入图片描述

三、【要点】伪元素制作三角形：

在这里插入图片描述

👇设置:after和未设置时的对比👇

在这里插入图片描述

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title></title> 
<style type="text/css">
body, p {
    padding: 0;
    margin: 0;
}

.test {
    margin: 100px;
}

.test .triangle:after {
    content: '';
    width: 100px;
    height: 100px;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-bottom: 50px solid red;
}
</style>
</head> 
<body>
    <div class="container">
        <div class="test">
            <div class="triangle"></div>
        </div>
    </div>
</body>
</html>

iuukai

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
初步认识常用两伪元素:before和:after

一、【要点】使用伪元素:before和:after时，必须设置content: '';属性，可空值，否则无效：二、【坑】行内元素的:before，属性content: '';为空值时，无效（还未找到原理，只能尽量用块级元素来设置伪元素了）：三、【要点】伪元素制作三角形：????设置:after和未设置时的对比????<!DOCTYPE html><html><...
复制链接

扫一扫