KPC
Kevin Powell - Community•16mo ago
zekeswanson

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
...
No description
5 Replies
snxxwyy
snxxwyy•16mo 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*/
}
zekeswanson
zekeswansonOP•16mo ago
Beautiful. It worked. Been stuck on this for a few days so thanks a ton for your help!!
snxxwyy
snxxwyy•16mo 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.
zekeswanson
zekeswansonOP•16mo ago
@snxxwyy I will look into using rem more. I appreciate you pointing it out!
snxxwyy
snxxwyy•16mo ago
good stuff! yeah no worries!

Did you find this page helpful?