CODEWITHSUNDEEP
htmlcss
Paul Bob
Paul Bob

Reputation: 493

Customized strikethrough on title

I'm creating a website to school project and i want to put a strikethrough behind my title like in this image. I want that green lines behind text

I am working with HTML and CSS , someone know the code to get that beautiful strikethrough?

Upvotes: 0

Views: 303

Answers (3)

Paul Bob
Paul Bob

Reputation: 493

I did it (Image example) but when i change resolution this happen: not responsive... How can i put it to be responsive? here is my HTML and here is my CSS... Thank you for all resolution but i'm using panther's example

#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>

here is the snippet but is very diferent from what i see on my browser

Upvotes: 0

pavel
pavel

Reputation: 27092

Short example including overlaying both strikes should be

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>

Using classes you can make overlays with different widths, etc. The basic idea is obvious.

Upvotes: 1

Ylama
Ylama

Reputation: 2489

This is an example , adjust as you wish, but you get the idea.

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>

Upvotes: 0

Related Questions