CSS设置标题前颜色小竖条

绘绘～

已于 2022-04-28 23:48:56 修改

阅读量1.5k

点赞数 3

分类专栏： css调试文章标签： css css3 html

于 2022-04-28 23:45:03 首次发布

本文链接：https://blog.csdn.net/m0_51126511/article/details/124486287

版权

css调试专栏收录该内容

7 篇文章

订阅专栏

这篇博客介绍了如何通过CSS来创建一个标题前面带有橙色小竖条的效果。HTML代码包含一个`<h2>`标签，CSS代码中利用`:before`伪元素和绝对定位来实现小竖条，设置了背景颜色、宽度、高度、圆角以及位置等属性，从而达到预期设计。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

CSS设置标题前颜色小竖条

上效果

在这里插入图片描述

那个橙色的小竖条即使实现效果哈，旁边的黑色是截图没截好的reason

HTML代码

    <div class="recomend-list">
      <h2>推荐歌单</h2>
    </div>

CSS代码

.recomend-list h2 {
  position: relative;
  font-size: 18px;
  text-align: left;
  padding-left: 9px;
  height: 40px;
  line-height: 40px;
}
.recomend-list h2:before {
  position: absolute;
  content: "";
  background-color: #ec8537;
  width: 4px;
  height: 18px;
  left: 0;
  top: 50%;
  margin-top: -8px;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;
}