CSS伪元素:: before无法正常工作

Question

我想要一个像这样的结构

但是我得到了这个

这是我的HTML代码

<div class='trial'>Available for a 3 months</div>

这是我的css

.trial {
  font-size: 15px;
  font-weight: 600;
  padding: 2px 21px 2px 21px;
  color: #33c4b6;
  border: 1px solid #e4e4e4;
  display: inline-block;
  border-radius: 15px;
  background-color: white;
  /* position: relative; */
  /* bottom: -20px; */
  margin: 20px 0px 20px 0px;
}

.trial::before {
  content: "";
  border-bottom: 1px solid rgba(211, 211, 211, 0.54);
  width: 45%;
  display: inline-block;
  vertical-align: middle;
  margin-left: 10px;
}

任何帮助都将受到高度赞赏。

Answer 1

  

对您的代码稍作修改。

.trial:before {
    content: "";
    border-bottom: 1px solid rgba(211, 211, 211, 0.54);
    width: 130%;
    display: inline-block;
    vertical-align: middle;
    position: absolute;
    left: -15%;
    top: 50%;
    z-index: -1 !important;
}

.trial {
    font-size: 15px;
    font-weight: 600;
    padding: 2px 21px 2px 21px;
    color: #33c4b6;
    border: 1px solid #e4e4e4;
    display: inline-block;
    border-radius: 15px;
    background-color: white;
    position: relative;
    margin: 20px 0px 20px 0px;  
}

check out this on https://jsfiddle.net/6xucrj9g/

Answer 2

看看这个小提琴：https://jsfiddle.net/ash06229/c7mLuhaj/

.trial {
    position: relative;
    font-size: 15px;
    font-weight: 600;
    padding: 2px 21px 2px 21px;
    color: #33c4b6;
    border: 1px solid #e4e4e4;
    display: inline-block;
    border-radius: 15px;
    background-color: white;
    margin: 20px 0px 20px 40px;
}

.trial::before {
    content: "";
    border-bottom: 1px solid rgba(211, 211, 211, 0.54);
    width: 45px;
    display: inline-block;
    vertical-align: middle;
    margin-left: 10px;
    position: absolute;
    left: -55px;
    top: 10px;
}

.trial::after {
    content: "";
    border-bottom: 1px solid rgba(211, 211, 211, 0.54);
    width: 45px;
    display: inline-block;
    vertical-align: middle;
    margin-left: 10px;
    position: absolute;
    right: -45px;
    top: 10px;
}