Kevin Powell - Community•15mo ago

Trouble with pseudo element

Hi everyone! I'm trying to replicate this line between the bullet points in the screen shot. Code pen link https://codepen.io/ezekielswanson/pen/qBLrXYJ Looking @ lines 12 and 18. I have the row to position relative, and trying to set the psuedo element after the img, and absolute position it. The line isn't even showing though. Am I way off? *Side note I don't have pro version on code pen so img are rendering

ezekielswanson

CodePen

Timeline Css

...

5 Replies

snxxwyy•15mo ago

@zekeswanson rather than setting the pseudo element on each list item (li), i'd recommend setting it on the whole container, this being the ul, setting the height to 100%, then using the left property to push it over however far you need as you were doing. I changed the pseudo element to ::before as it places the line at the top going down, ::after places it from the bottom going down. Here's the fix i tried, let me know if you have any questions.

.dashboard-card__feed-display {
  position: relative;
}

.dashboard-card__feed-display::before {
  position: absolute;
  left: 10px; /*Change depending on how far over you want the line*/
  content: '';
  width: 2px;
  height: 100%;
  background: white; /*Your background color, i put white as you didn't include your color variable*/
}

.dashboard-card__feed-display {
  position: relative;
}

.dashboard-card__feed-display::before {
  position: absolute;
  left: 10px; /*Change depending on how far over you want the line*/
  content: '';
  width: 2px;
  height: 100%;
  background: white; /*Your background color, i put white as you didn't include your color variable*/
}

zekeswansonOP•15mo ago

Beautiful. It worked. Been stuck on this for a few days so thanks a ton for your help!!

snxxwyy•15mo ago

no worries at all, happy to help! @zekeswanson on a side note, whilst looking through your code i noticed you use px quite frequently, whilst it's not bad to use it in certain situations, i'd much recommend taking a dive into looking at em and rem.

zekeswansonOP•15mo ago

@snxxwyy I will look into using rem more. I appreciate you pointing it out!

snxxwyy•15mo ago

good stuff! yeah no worries!

Gaming

Programming

Trouble with pseudo element