Tide Lake Tide Lake - 2 months ago 10
CSS Question

CSS Pseudo-element confusion (SOLVED)

fellow organic intelligences, I'm puzzled how to work out this problem, which has a practical structure like so—

<p.lead><div.fa>[font-awsome-icon]</div> Orange Header Text </p>
<p.description> lorem ipsum... </p>


Using this css, I need to preserve the line reaching the circle, even if the orange
p.lead
text has to wrap. Thank you.

p.lead {
position: relative;
color: $erisaOrange;
text-shadow: 0px 0px $darkCanvas;
letter-spacing: 105%;
margin-left: 8px;
.fa {
position: relative;
top: 2px;
left: -10px;
margin-right: 0.3em;
color: $darkerGray;
text-shadow: 2px 2px $darkGray;
text-align: center;
background-color: transparent;
content: '';
border: 2px solid $darkGray;
font-size: 114%;
line-height: 44px;
width: 44px;
height: 44px;
border-radius: 22px;
}
}

p.description {
position: relative;
padding-left: 1em;
padding-right: 1em;
margin-bottom: 2em;
margin-left: 19px;
font-size: 18px;
border-left: 2px solid $darkGray;
&:before {
position: absolute;
top: -1em;
left: -2px;
content: '';
border-left: 2px solid $darkGray;
height: 1em;
}
&:after {
position: absolute;
bottom: -2.2em;
left: -2px;
content: '';
border-left: 2px solid $darkGray;
height: 2.2em;
}
}
}


As is (unacceptable). I don't need a "pure" css solution, necessarily.

enter image description here

SOLUTION (with help from the accepted answer)

.wrap-feature {
position: relative;
border-left: 2px solid $darkGray;
margin: 0px 12px;
&:after {
position: absolute;
content: ' ';
left: -2px;
bottom: -108px;
line-height: 108px;
height: 108px;
border-left: 2px solid $darkGray;
}
}

.icon {
position: absolute;
background-color: transparent;
left: -25px;
color: gray;
text-align: center;
border: 2px solid $darkGray;
font-size: 114%;
line-height: 44px;
width: 44px;
height: 44px;
border-radius: 22px;
padding:0px;
background-color:#fff;
}

h5, p.description {
position: relative;
top: 8px;
margin-left: 26px;
}

h5 {
color: $orange;
letter-spacing: 105%;
font-size: 22px;
}

p.description {
font-size: 18px;
margin-bottom: 2.2em;
}

Answer

I would approach this by structuring the HTML differently. No JS needed.

Having the icon and the header text in the same line will be inherently problematic. When the header text wraps, it's going to start again at the beginning of the line, exactly as you have demonstrated.

First, I would wrap the whole thing in a wrapper div and use that to create the 2px left border instead of using :before elements.

Then I would pull the icon div out of the p element. It would instead be inside the wrapper div. I would position it absolutely to overlap the wrapper div's left border.

I would use a header (like an h2) instead of a p for the section header, but that's not necessary to make this work.

h2.lead {
  position: relative;
  color: orange;
  font-size:24px;
  text-shadow: 0px 0px grey;
  margin-left: 8px;
}

.wrapper {
  position:relative;
  border-left: 2px solid gray;
  margin: 20px;
  padding:20px;
  width: 350px
}

.icon {
  position: absolute;
  top: 40px;
  left: -25px;
  margin-right: 0.3em;
  color: gray;
  text-align: center;
  border: 2px solid gray;
  font-size: 50px;
  line-height:1;
  width: 44px;
  height: 44px;
  border-radius: 22px;
  padding:0px;
  background-color:#fff;
}

p.description {
  position: relative;
  margin-bottom: 2em;
  font-size: 18px;
  margin-left: 8px;
}
<div class="wrapper">
  <div class="icon">✪</div> 
  <h2 class="lead"> Here's some header text.
  Orange Header Text </h2>
  <p class="description"> lorem ipsum... </p>  
</div>

Comments