Html - title background with scss

hoba
June 6, 2023
237 views
1 vote
2 Answers

I am trying to achieve this via scss

a title with a clored background

I tried adding : before with colored bacground
and also I tried making one div relative and the other one position: aboslute
b ut it didn’t work

html:

`    <div class="volunteer__title">
          <div class="volunteer__title--bg">      
          <div class="volunteer__title--text" >Volunteer</div>
      </div>`

css:

 &__title {
    display: flex;
    flex-direction: row;
    font-family: "Fredoka", sans-serif;
    font-size: 30px;
    position: relative;

    &--bg {
      background-color: $darkGreen;
      width: 100px;
      height: 25px;
      border-radius: 5px;
      &--text {
        position: fixed;
        left: 0;
        top: 0;
      }
    }
  }

but didn’t work
any ideas?

Answers

I made a change using display property, from fixed to absolute.

Fixed Positioning:
When an element is set to position: fixed; it is positioned relative to the browser window’s viewport, regardless of scrolling. This means that even if the user scrolls the page, the element will stay in the same position on the screen. Fixed elements are often used for headers, footers, or navigation bars that need to remain visible at all times.

Absolute Positioning:
On the other hand, when an element is set to position: absolute; it is positioned relative to its closest positioned ancestor (an element with a position value other than static) or the document’s initial containing block if no positioned ancestor is found. Absolute positioning takes the element out of the normal document flow, allowing you to precisely position it anywhere on the page. When the page is scrolled, absolute positioned elements will move with their positioned ancestor.

I mixed display: absolute; and z-index: -1; (check the code below).

Check width: fit-content in volunteer__title as well.

Example 1

.volunteer__title {
    font-family: "Fredoka", sans-serif;
    font-size: 30px;
    position: relative;
    width: fit-content;
    font-weight: 500;
}

.volunteer__title--bg {
  position: absolute;
  background-color: #8FD192;
  width: 116px;
  height: 25px;
  border-radius: 5px;
  top: 50%;
  transform: translateY(-50%);
  z-index: -1;
  margin-top: 6px;
  right: -3px;
}

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Fredoka:wght@300;400;500&display=swap" rel="stylesheet">

<div class="volunteer__title">
    <div class="volunteer__title--bg"></div>      
    <div class="volunteer__title--text" >volunteer</div>
</div>

In SCSS:

.volunteer__title {
    font-family: "Fredoka", sans-serif;
    font-size: 30px;
    position: relative;
    width: fit-content;
    font-weight: 500;

    &--bg {
        position: absolute;
        background-color: #8FD192;
        width: 116px;
        height: 25px;
        border-radius: 5px;
        top: 50%;
        transform: translateY(-50%);
        z-index: -1;
        margin-top: 6px;
        right: -3px;
    }
}

Example 2

In this example, I get rid of the element bg and used ::after that creates a pseudo-element of the selected element (text).

.volunteer__title {
    font-family: "Fredoka", sans-serif;
    font-size: 30px;
    position: relative;
    width: fit-content;
    font-weight: 500;
}

.volunteer__title--text::after {
  display: block;
  content: '';
  position: absolute;
  background-color: #8FD192;
  width: 116px;
  height: 25px;
  border-radius: 5px;
  top: 50%;
  transform: translateY(-50%);
  z-index: -1;
  margin-top: 6px;
  right: -3px;
}

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Fredoka:wght@300;400;500&display=swap" rel="stylesheet">

<div class="volunteer__title">
    <div class="volunteer__title--text" >volunteer</div>
</div>

In SCSS:

.volunteer__title {
    font-family: "Fredoka", sans-serif;
    font-size: 30px;
    position: relative;
    width: fit-content;
    font-weight: 500;

    &--text::after {
        display: block;
        content: '';
        position: absolute;
        background-color: #8FD192;
        width: 116px;
        height: 25px;
        border-radius: 5px;
        top: 50%;
        transform: translateY(-50%);
        z-index: -1;
        margin-top: 6px;
        right: -3px;
    }
}

For more details about these properties, check the links below:

CSS Tricks | Absolute, Relative, Fixed Positioning
MDN | z-index
MDN | ::after

While @001 was on the right track, there are some changes to be made to add responsivness and to simplyfy the entire case.

First at all you should not use an HTML element to create the green box but a pseudo-element by using either ::before ore ::after and then position it with position: absolute in relative units.

.volunteer__title {
    font-family: "Fredoka", sans-serif;
    font-size: 30px;
    position: relative;
    width: fit-content;
    font-weight: 500;
}

.volunteer__title::after {
  content: "";
  display: block;
  background-color: #8FD192;
  border-radius: 5px;
  position: absolute;
  top: 0.4em;
  right: -0.1em;
  width: 6.7ch;
  height: 0.7em;
  border-radius: 5px; 
  z-index: -1; 
}

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Fredoka:wght@300;400;500&display=swap" rel="stylesheet">

<div class="volunteer__title">    
    <div class="volunteer__title--text" >volunteer</div>
</div>

If you want it in SASS you can use combi9ne it into:

.volunteer__title {
  font-family: "Fredoka", sans-serif;
  font-size: 30px;
  position: relative;
  width: fit-content;
  font-weight: 500;
  &::after {
    content: "";
    display: block;
    background-color: #8FD192;
    border-radius: 5px;
    position: absolute;
    top: 0.4em;
    right: -0.1em;
    width: 6.7ch;
    height: 0.7em;
    border-radius: 5px; 
    z-index: -1; 
  }
}

Please signup or login to give your own answer.

Click here to cancel reply.

Html – title background with scss

Answers

Example 1

Example 2