CSS僞元素::之前不能正常工作

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; 
}