0

I'm trying to add an orange accent to my banner text using the ::after psuedo element.

goal:

enter image description here

I'm having two problems:

  • getting :after to show up when content is empty

  • stacking the :after between the parent element and image. I've tried specifying z-indexes

(I forced the :after to appear by putting dummy content so the stacking problem is shown)

enter image description here

html

<div className="hero-banner">
      <div className="hero-banner-content">
        <img src={img0} alt="image"/>
        <div className="hero-banner-text">
          <span className="highlighted">Master</span>
          <span>the art of performance</span>
        </div>
      </div>
    </div>

scss 

.hero-banner {
  position: relative;
  top: 0;
  left: 0;
  height: 100vh;
  .hero-banner-content {
    position: relative;
    top: -70px;
    width: 100%;
    img {
      object-fit: cover;
      width: 100%;
      height: 100vh;
      z-index: 1;
    }
    .hero-banner-text {
      padding: 0 24px;
      color: #FFFFFF;
      font-size: 54px;
      font-weight: $fw-bold;
      width: 361px;
      position: absolute;
      top: 237px;
      left: 192px;
      .highlighted {
        font-size: 96px;
        display: block;
      }
      > * {
        text-transform: uppercase;
        z-index: 4;
      }
      &:after {
        content: "_____";
        height: 32px;
        width: 200px;
        background-color: $orange;
        opacity: 0.4;
        position: relative;
        top: 32px;
        left: -432px;
        z-index: 2;
      }
    }
  }
}
marzipan
  • 151
  • 1
  • 13
  • you need display:inline-block and you can remove the content – Temani Afif Mar 23 '20 at 21:56
  • (1) first duplicate explaining why z-index isn't working (2) second duplicate explaining why width isn't working (pseudo element are inline element by default) – Temani Afif Mar 23 '20 at 21:58
  • Hmmm, adding `display: inline-block` to the `:after` element makes it disappear entirely, even what `content` is specified. – marzipan Mar 23 '20 at 22:12
  • adjust the left/top position to see it again. By the way you have to use position:absolute not relative – Temani Afif Mar 23 '20 at 22:15
  • I changed the position to `absolute`, siaply to `inline-block` and updated the positioning and it is indeed showing up, but still ignoring z-index. Maybe a box-shadow would be more appropriate – marzipan Mar 23 '20 at 22:23
  • the z-index issue is with the other element where you are adding z-index:4 .. you need to make them position:relative OR make the z-index of the pseudo element negative – Temani Afif Mar 23 '20 at 22:24
  • catch 22: if i make `.hero-banner-text` position: relative the text is no longer layered on top of the image. if I make the z-index of the psuedo element negative, the psuedo element disappears behind the image – marzipan Mar 23 '20 at 22:59
  • I am not talking about hero-banner-text ... I said *the z-index issue is with the other element where you are adding z-index:4 .. you need to make them position:relative* – Temani Afif Mar 23 '20 at 23:00
  • ok, i've removed negative z-index and added `position: absolute` on psuedo el, and added `position: relative` + removed z-index on the `> *` elements. But the psuedo element still appears stacked on top. if i try the other solution, the psuedo element dissapears behind image – marzipan Mar 23 '20 at 23:06
  • i got it!!! the `img` needed to have a non-static position in order to assign it a z-index of ultimately back – marzipan Mar 23 '20 at 23:12

0 Answers0