[css特殊符号系列] '添加'＋符号

最新推荐文章于 2023-03-16 21:45:28 发布

lifankeke

最新推荐文章于 2023-03-16 21:45:28 发布

阅读量2.7k

点赞数

分类专栏： css 文章标签： css 特殊符号伪元素

本文链接：https://blog.csdn.net/weixin_36089438/article/details/84349189

版权

css 专栏收录该内容

11 篇文章 1 订阅

订阅专栏

目标图：

知识点：

伪元素::after content必须有，可以为空。
伪元素默认display：inline，所以当content:''时，伪元素不能被撑开而造成看不见，此时可以设置display属性或者对伪类元素定位。
并且伪元素跟在主元素（暂且这么叫）内容的后面，而不是主元素的后面。

html代码：

<div className="App">
   <div className='cross'></div>
</div>

css代码：

.App {
  height: 51px;
  width: 51px;
  margin:200px;
  border: black 1px solid;
  border-radius: 25px;
  position: relative;
}
.cross{
  height: 1px;
  width: 44px;
  background: black;
  position: absolute;
  top:25px;
  bottom:0;
  left: 3px
}
.cross::after {
  content: '';
  height: 44px;
  width: 1px;
  display: block;
  background: black;
  position: absolute;
  top:-22px;
  left: 22px
}