侧边栏壁纸
博主头像
黑山老妖博主等级

记录精彩的坎坷人生

  • 累计撰写 72 篇文章
  • 累计创建 85 个标签
  • 累计收到 9 条评论

目 录CONTENT

文章目录

CSS 伪元素before,after制作文字两边的横线

我是我村的希望
2023-04-01 / 0 评论 / 0 点赞 / 9 阅读 / 1896 字 / 正在检测是否收录...
温馨提示:
本文最后更新于 2024-02-21,若内容或图片失效,请留言反馈。部分素材来自网络,若不小心影响到您的利益,请联系我们删除。

css3为了区分伪类和伪元素,伪元素采用双冒号写法

::before和::after下特有的content,用于在css渲染中向元素逻辑上的头部或尾部添加内容

::before和::after必须配合content属性来使用,content用来定义插入的内容,content必须有值,至少是空

这些添加不会出现在DOM中,不会改变文档内容,不可复制,仅仅是在css渲染层加入

所以不要用:before或:after展示有实际意义的内容,尽量使用它们显示修饰性内容,例如图标。

//html 部分
<div class="title">
<h3>温馨提示</h3>
</div>
//css 部分
.title h3 { display: flex; justify-content: center; align-items: center; } 
.title h3:after { background: #555; content: ""; height: 2px; width: 80px; margin-left: 15px; }
.title h3:before { background: #555; content: ""; height: 2px; width: 80px; margin-right: 15px; }

hpfcbjomesfc.png

0
广告 广告

评论区