CODEWITHSUNDEEP
htmlcss
Jury
Jury

Reputation: 181

Adding background Color in Text Property

Good day, i just want to ask if how to select just the text not the whole width of the li, because what i wanted to happen is add a background color with transparency the text just like the in the image, what i wanted to happen

i tried playing in display property and i couldn't get it. Thanks so much in advance.

.container-two .skills{
    margin: 3rem 0 0 4rem;
}

.container-two .skills ul li {
    padding-top: 2rem;
    font-size: 3rem;
    display: flex;
    justify-content: flex-start;
    align-items: center;
}
.container-two .skills span {
    width: 35px;
    height: 35px;
    border-radius: 50%;
    display: inline-flex;
    text-align: center;
    color: white;
    align-items: center;
    justify-content: center;
    align-content: center;
    margin-right: 1rem;
    font-size: 1.5rem;
}

.container-two .skills .html-span {
    background-color: #F16529;
}

.container-two .skills .css-span {
    background-color: #4B8BBE;
}

.container-two .skills .javascript-span {
    background-color: #EF9C44;
}

.container-two .skills .python-span {
    background-color: #7666A7;
}

.container-two .skills p {
    width: 100%;
    background-color: black;
}
 <section class="container-two">
        <img src="/images/skills.png" alt="My Skills" class="skills-image">
        <div class="info">
            <div></div>
            <p>Skills <i class="far fa-address-card about-card"></i></p>
        </div>
        <div class="skills">
            <ul>
                <li class="html"> <span class="html-span">1.</span><p>HTML</p></li>
                <li class="css"><span class="css-span">2.</span>CSS</li>
                <li class="javascript"><span class="javascript-span">3.</span>JAVASCRIPT</l>
                <li class="python"><span class="python-span">4.</span>PYTHON</li>
            </ul>
    </section>

Upvotes: 0

Views: 84

Answers (3)

Sandrin Joy
Sandrin Joy

Reputation: 1184

from the reference of https://stackoverflow.com/a/40958779/142160031 ,

We can get the exact same Output as the given Image

for the background from bottom to center , you could make use of linear-gradient to top property

for setting the background size same as the text width

display:inline-block will do the work for you

.half {
  background: linear-gradient(to top, rgba(0,0,0,0.3) 50%, transparent 0);
  display:inline-block;
}
<p class="half">HTML</p>

Upvotes: 2

lambdacoder
lambdacoder

Reputation: 116

I think it would be best to set the width: auto; as per MDN docs because the browser will calculate and select a width for the specified element. Now to get a transparent background I have used values that start at 0.1 as it's closer to your provided image.

.container-two .skills p {
    width: auto;
    background-color: rgba(0,0,0,0.1);
}

Upvotes: 0

Wael Zoaiter
Wael Zoaiter

Reputation: 716

You can do that by removing width: 100% form the p tag inside the item, or replacing it with width: fit-content.

.container-two .skills p {
    width: fit-content;
    background-color: rgba(0,0,0,.2);
}

Upvotes: 2

Related Questions