I am trying to achieve a single contiguous outline around a <span> element nested within a <p> and <div>. I came across a solution here: CSS/Javascript: How to draw minimal border around an inline element? which works well except when there is a line-height set on any elements. Is there a way to create the desired single outline (as shown in the mockup) while keeping my line height intact?
Below is the code I am currently using:
.note_text_theme {
outline: 2px solid blue;
outline-style: dashed;
}
.note_text_theme span {
border: 1px solid white;
background-color: white;
position: relative;
z-index: 1000;
}
p {
margin: 10px;
}
.text_paragraph {
font-size: 18px;
line-height: 170%;
}<div class="text_paragraph">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin id lobortis purus. Nunc nibh metus, dictum sit amet mi sed, sagittis fermentum mauris. Mauris tincidunt lectus quam, quis tincidunt mi finibus at. <span class="note_text_theme">Cras feugiat accumsan magna, vel malesuada sem pulvinar nec. Curabitur a sem quis metus sodales rhoncus. Phasellus tempus ante magna, a gravida est pellentesque sed. Nam volutpat tortor nec lobortis aliquam. Fusce ornare pharetra tristique. Cras fringilla, nunc ac lobortis posuere, libero est</span>
<span></span>blandit justo, ut placerat nisl erat viverra odio. Praesent finibus viverra neque, quis feugiat felis porttitor a. Vestibulum ante ipsum primis in faucibus orci luctus.
</p>
</div>When I comment out the line-height property, the outline works as expected. This code snippet below shows this scenario:
.note_text_theme {
outline: 2px solid blue;
outline-style: dashed;
}
.note_text_theme span {
border: 1px solid white;
background-color: white;
position: relative;
z-index: 1000;
}
p {
margin: 10px;
}
.text_paragraph {
font-size: 18px;
//line-height: 170%;
}<div class="text_paragraph">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin id lobortis purus. Nunc nibh metus, dictum sit amet mi sed, sagittis fermentum mauris. Mauris tincidunt lectus quam, quis tincidunt mi finibus at. <span class="note_text_theme">Cras feugiat accumsan magna, vel malesuada sem pulvinar nec. Curabitur a sem quis metus sodales rhoncus. Phasellus tempus ante magna, a gravida est pellentesque sed. Nam volutpat tortor nec lobortis aliquam. Fusce ornare pharetra tristique. Cras fringilla, nunc ac lobortis posuere, libero est</span>
<span></span>blandit justo, ut placerat nisl erat viverra odio. Praesent finibus viverra neque, quis feugiat felis porttitor a. Vestibulum ante ipsum primis in faucibus orci luctus.
</p>
</div>