I am trying to build links that look like these:
This from another post on here is the closest I have found - http://jsbin.com/ahoyug/1/edit
but due to using border-left the gaps between the line height is filled. As shown here:
Is this possible to do using CSS or will a JS solution be needed?
Styling of an element such as background color does not affect the margin. Padding is affected by the styling of an element, such as background color.
When the text in a single table cell exceeds a few words, a line break (<BR>) may improve the appearance and readability of the table. The line break code allows data to be split into multiple lines. Place the line break code <BR> within the text at the point(s) you want the line to break.
Complete HTML/CSS Course 2022 To create a multi-line text input, use the HTML <textarea> tag. You can set the size of a text area using the cols and rows attributes. It is used within a form, to allow users to input text over multiple rows.
Is this what you want?
JSFiddle
<div>
<span>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</span>
</div>
div {
padding: 40px;
background-color: #C9D77D;
font-family: Helvetica, sans-serif;
font-weight: bold;
font-size: 20px;
}
span {
padding: 6px 0;
background-color: white;
line-height: 2.2;
box-shadow: -10px 0px 0 #FFF, 10px 0px 0 #FFF;
}
Edit: I added the box-shadow
property from @Jaik's answer because it was totally great.
It can certainly be done with CSS3 box-shadow
easily enough. I've put up a JS Bin example here: http://jsbin.com/ahoyug/12/edit
You'll need to sort out vendor prefixes and old IE fallbacks for production.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With