Question

我正在创建一个到学校项目的网站，我想在我的标题后面添加一个删除线，就像在这张图片中一样。 I want that green lines behind text

我正在使用HTML和CSS，有人知道代码可以获得美丽的删除线吗？

Answer 1

包括覆盖两次打击的简短示例应该是

p {font-size: 130px; color: #f00;}
span {position: relative;}
span:before, span:after {content: ''; background: rgba(0,0,0,.5); border-radius: 20px; position: absolute; top: calc(50% - 20px); width: 56%; height: 40px; z-index: -1}
span:before {left: 0;}
span:after {right: 0;}

span.left:before {width: 100%;}
span.left:after {width: 100px; left: 0;}

span.longer:before {width: 60%; left: 8%}
span.longer:after {width: 43%; left: 47%;}

<p>
    <span>TEXT</span> <br>
    <span>WITH</span> <br>
    <span>STRIKE</span><br>
    <span class="left">LEFT</span>
    <span class="longer">OTHER</span>
</p>

使用类可以制作不同宽度的叠加层等。基本思路很明显。

Answer 2

这是一个例子，可以根据需要进行调整，但是你明白了。

h2 {
    font: 33px sans-serif;
    margin-top: 30px;
    text-align: center;
    text-transform: uppercase;
    color: red;
}

h2.background {
    position: relative;
    z-index: 1;
    }
    
h2.background:before {
        border-top: 2px solid #000;
        content:"";
        margin: 0 auto; /* this centers the line to the full width specified */
        position: absolute; /* positioning must be absolute here, and relative positioning must be applied to the parent */
        top: 50%; left: 0; right: 0; bottom: 0;
        width: 95%;
        z-index: -1;
}

<h2 class="background">Random Title</h2>

Answer 3

我做到了（Image example）但是当我改变解决方案时会发生这种情况：not responsive ...我怎样才能让它做出回应？这是我的HTML，这是我的CSS ...谢谢你所有的决议，但我正在使用黑豹的例子

#titulo1{
    font-size: 5vw;
    font-weight: 400;
    color:#f5dc9f;
    font-family: 'Moon Light' , sans-serif;
    float: right;
    margin-bottom: 0;
    margin-top: 15vw;
    margin-right: 15vw;
    display: flex;

   
}

#titulo2{
    color: #f5dc9f;
    font-size:6.7vw;
    font-family: 'Moon Bold', sans-serif;
    clear: right;
    float: right;
    margin-top: 0;
    margin-bottom: 0;
    margin-right: 13vw;
    
}

#titulo3{
    font-size: 4.8vw;
    font-weight: 400;
    color:#f5dc9f;
    font-family: 'Moon Light' , sans-serif;
    float: right;
    margin-top: 0;
    margin-right: 3vw;
   
}

#titulo2:before, #titulo2:after {
    content: '';
    background: rgba(0,0,255,0.3);;
    border-radius: 40px;
    position: absolute;
    top: calc(53% - 1vw);
    width: 50%;
    height: 5%;
    z-index: -1
}

#titulo2:before{
    left: 54vw;
    width: 15vw;
}
#titulo2:after{
    right: 11vw;
    width: 26vw;
}

#titulo1:before, #titulo1:after {
    content: '';
    background: rgba(0,0,255,0.3);;
    border-radius: 40px;
    position: absolute;
    top: calc(40% - 20px);
    width: 50%;
    height: 5%;
    z-index: -1
}

#titulo1:before{
    left: 52vw;
    width: 17vw;
    height: 2vw;
}
#titulo1:after{
    right: 15vw;
    width: 20vw;
    height: 2vw;
}

#titulo3:before, #titulo3:after {
    content: '';
    background: rgba(0,0,255,0.3);;
    border-radius: 40px;
    position: absolute;
    top: calc(66% - 20px);
    width: 50%;
    height: 5%;
    z-index: -1
}

#titulo3:before{
    width: 3em;
    height: 0.4em;
}
#titulo3:after{
    right: 0.5em;
    width: 9em;
    height: 0.4em;
}

        <h2 id="titulo1">Aqui vai ser</h2><br>
        <h1 id="titulo2">o titulo</h1><br>
        <h2 id="titulo3">do nosso trabalho!</h2><br>

这是片段，但与我在浏览器上看到的非常不同

标题上的定制删除线

3 个答案: