css 横线置于文字两侧

最新推荐文章于 2023-05-10 17:24:33 发布

羡与

最新推荐文章于 2023-05-10 17:24:33 发布

阅读量191

点赞数

分类专栏： html 前端 css 文章标签： html less 前端 css

本文链接：https://blog.csdn.net/hfhwfw161226/article/details/100077045

版权

前端同时被 3 个专栏收录

30 篇文章 1 订阅

订阅专栏

html

7 篇文章 1 订阅

订阅专栏

css

5 篇文章 0 订阅

订阅专栏

如图效果：

html

<a class="forgot" href="/passport/forget-password">忘记密码</a>

less

.forgot {
  display: inline-block;
  color: rgba(0, 0, 0, 0.25);
  position: relative;
  overflow: hidden;
  width: 100%;
  text-align: center;

  &::before {
    content: '';
    width: 50%;
    border-bottom: 1px solid rgba(0, 0, 0, 0.15);
    position: absolute;
    left: -44px;
    top: 11px;
  }

  &::after {
    content: '';
    width: 50%;
    border-bottom: 1px solid rgba(0, 0, 0, 0.15);
    position: absolute;
    right: -44px;
    top: 11px;
  }
}