带文字内容的分隔线

  1. <hr class="hr-solid-content" data-content="分隔线">
  2. <hr class="hr-solid-content" data-content="文字自适应，背景透明">
  3. .hr-solid-content {
  4.     color: #a2a9b6;
  5.     border: 0;
  6.     font-size: 12px;
  7.     padding: 1em 0;
  8.     position: relative;
  9. }
  10. .hr-solid-content::before {
  11.     content: attr(data-content);
  12.     position: absolute;
  13.     padding: 0 1ch;
  14.     line-height: 1px;
  15.     border: solid #d0d0d5;
  16.     border-width: 0 99vw;
  17.     width: fit-content;
  18.     /* for 不支持fit-content浏览器 */
  19.     white-space: nowrap;
  20.     left: 50%;
  21.     transform: translateX(-50%);
  22. }

image.png

两端虚线

使用的border-image配合重复线性渐变模拟的虚线边框效果，HTML代码为

  1. <hr class="hr-dashed-content" data-content="分隔线">

CSS代码，.hr-dashed-content需要的CSS代码和上面.hr-solid-content一模一样，然后，额外增加下面这行CSS：

  1. .hr-dashed-content::before {
  2.     border-image: repeating-linear-gradient(90deg, #d0d0d5, #d0d0d5 1px, transparent 1px, transparent 2px) 0 85% / / 0 repeat;
  3. }

image.png

两端淡出

在原来实线效果基础上使用渐变作为遮罩就可以实现这样的效果了：

  1. <hr class="hr-fade-content" data-content="分隔线">
  2. // ... 一致代码略
  3. .hr-fade-content {
  4.     -webkit-mask-image: linear-gradient(to right, transparent, black, transparent);
  5.     mask-image: linear-gradient(to right, transparent, black, transparent);
  6. }

image.png

内容装饰

如果希望内容用框框起来，加个背景什么的，则需要借助另外一个伪元素，因为::before的尺寸高度被限制在了1px, 此时只能::after伪元素出马，同样不展示一致的CSS代码。

  1. <hr class="hr-mid-border-content" data-content="分隔线">
  2. .hr-mid-border-content::after{
  3.     content: attr(data-content);
  4.     position: absolute;
  5.     padding: 4px 1ch;
  6.     top: 50%; left: 50%;
  7.     transform: translate(-50%, -50%);
  8.     color: transparent;
  9.     border: 1px solid #d0d0d5;
  10. }

image.png

参考