What you can’t do is simply apply a background and padding to, say, the You also can’t simply apply the background and padding to a Describing this is a bit futile. Here’s the problem visually:<\/p>\n What we want is for each line<\/em> to be padded like the beginning of that first line and end of that last line. We don’t want to resort to anything gross like wrapping each line in it’s own span (where lines break is to unpredictable). And there is no such thing as :nth-line unfortunately<\/a>.<\/p>\n There are some solutions though!<\/p>\n The big trick here is using See the Pen BtpGo<\/a> by Chris Coyier (@chriscoyier<\/a>) on CodePen<\/a><\/p>\n Unfortunately Firefox doesn’t dig the way the pseudo element is positioned in that technique. Probably fixable, but, there might be a better way…<\/p>\n Turns out you can use zero-spread box-shadow on an inline element on only the x-axis to pad each line. Essentially:<\/p>\n Here is the original<\/a> and then my fork to show how it works:<\/p>\n See the Pen Wrapping Highlighted Text<\/a> by Chris Coyier (@chriscoyier<\/a>) on CodePen<\/a><\/p>\n Note: I had to update this code when Firefox 32 dropped. Firefox requires Fair warning: Dave says don’t use this.<\/strong> I’m including it because I think it’s clever and in some weird way actually feels less<\/em> hacky to me. The idea is to go through the text of each element and replace the spaces with the unicode character Here is the original<\/a> and my stripped down fork:<\/p>\n See the Pen Wrapping Highlighted Text<\/a> by Chris Coyier (@chriscoyier<\/a>) on CodePen<\/a><\/p>\n It’s a bit tricky to get the line-height just right so the border lines up with the padding, but I’m sure you can figure it out. There is probably even some fancy math to use to make sure it’s right.<\/p>\n If JavaScript works for you, there is also a jQuery wraplines plugin in which then you could apply the padding to each individual line. Demo<\/a>.<\/p>\n Turns out you can do this with almost no fancy CSS or JS at all, but using three elements. You need a block-level parent for a border-left. Then an inline element to apply the padding and background to. Then another inline element to nudge the text back to the left to get the padding on the right edges.<\/p>\n The original is in this thread<\/a>, and my demo:<\/p>\n See the Pen pvBFg<\/a> by Chris Coyier (@chriscoyier<\/a>) on CodePen<\/a><\/p>\n If you’re looking at this in Firefox, there might be some line-height issues. I basically have no idea why that is, kinda frustrating, particularly in situations like this.<\/p>\n During a discussion that popped up over this, Adam pointed out there is a new CSS property<\/a> that is (as I understand it) specifically for this. This removes the need for three elements. Technically you only need one, the inline element, but it’s likely you’ll be doing this on a header so you’ll probably end up with a block-parent anyway, which is best for spacing.<\/p>\n Here is the original<\/a> and my stripped down demo:<\/p>\n See the Pen hIvFe<\/a> by Chris Coyier (@chriscoyier<\/a>) on CodePen<\/a><\/p>\n This is working in Chrome and Safari, The people I attributed in this article were the people I first saw the technique from. But they don’t necessarily represent The Absolute First Person Ever To Think Of It™. In the comments below, a few older blog posts came up that tackled this same issue. One by Sergey Chikuyonok<\/a> (Russian) and one by HTeuMeuLeu<\/a> (French).<\/p>\n","protected":false},"excerpt":{"rendered":" This is one of those tricky CSS things that I see come up every few months. I guess what better place to address it than CSS-Tricks eh?<\/p>\n","protected":false},"author":3,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_bbp_topic_count":0,"_bbp_reply_count":0,"_bbp_total_topic_count":0,"_bbp_total_reply_count":0,"_bbp_voice_count":0,"_bbp_anonymous_reply_count":0,"_bbp_topic_count_hidden":0,"_bbp_reply_count_hidden":0,"_bbp_forum_subforum_count":0,"sig_custom_text":"","sig_image_type":"featured-image","sig_custom_image":0,"sig_is_disabled":false,"inline_featured_image":false,"c2c_always_allow_admin_comments":false,"footnotes":"","jetpack_publicize_message":"","jetpack_is_tweetstorm":false,"jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":[]},"categories":[4],"tags":[478],"jetpack_publicize_connections":[],"acf":[],"jetpack_featured_media_url":"","jetpack-related-posts":[{"id":302289,"url":"https:\/\/css-tricks.com\/building-multi-directional-layouts\/","url_meta":{"origin":155648,"position":0},"title":"Building Multi-Directional Layouts","date":"January 23, 2020","format":false,"excerpt":"There are some new features in CSS that can assist us with building layouts for different directions and languages with ease. This article is about CSS logical properties and values (e.g. margin-inline-start). \u00a0These are a W3C working draft that still going under heavy editing, but have shipped in many browsers.\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/01\/rtl-ltr.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":194152,"url":"https:\/\/css-tricks.com\/fun-line-height\/","url_meta":{"origin":155648,"position":1},"title":"Fun with line-height!","date":"January 26, 2015","format":false,"excerpt":"The line-height property in CSS controls the space between lines of text. It is often set in a unitless value (e.g. line-height: 1.4;) so that it is proportional to the font-size. It's a vital property for typographic control. Too low and lines are awkwardly squished together; too high and lines\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":365946,"url":"https:\/\/css-tricks.com\/css-hover-effects-background-masks-3d\/","url_meta":{"origin":155648,"position":2},"title":"Cool CSS Hover Effects That Use Background Clipping, Masks, and 3D","date":"May 26, 2022","format":false,"excerpt":"We\u2019ve walked through a series of posts now about interesting approaches to CSS hover effects. We started with a bunch of examples that use CSS background properties, then moved on to the text-shadow property where we technically didn\u2019t use any shadows. We also combined them with CSS variables and calc()\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/05\/Cool-hover-effects.jpg?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":314816,"url":"https:\/\/css-tricks.com\/when-do-you-use-inline-block\/","url_meta":{"origin":155648,"position":3},"title":"When do you use inline-block?","date":"July 20, 2020","format":false,"excerpt":"The inline-block value for display is a classic! It's not new and browser support is certainly not something you need to worry about. I'm sure many of us reach for it intuitively. But let's put a point on it. What is it actually useful for? When do you pick it\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/07\/inline-block-columns.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":363124,"url":"https:\/\/css-tricks.com\/css-link-hover-effects\/","url_meta":{"origin":155648,"position":4},"title":"6 Creative Ideas for CSS Link Hover Effects","date":"February 15, 2022","format":false,"excerpt":"Creating CSS link hover effects can add a bit of flair to an otherwise bland webpage. If you\u2019ve ever found yourself stumped trying to make a slick hover effect, then I have six CSS effects for you to take and use for your next project. Let\u2019s get right to it!\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2018\/07\/link-pattern.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":362616,"url":"https:\/\/css-tricks.com\/css-scroll-snap-slide-deck\/","url_meta":{"origin":155648,"position":5},"title":"CSS Scroll Snap Slide Deck That Supports Live Coding","date":"February 7, 2022","format":false,"excerpt":"Virtual conferences have changed the game in terms of how a presenter is able to deliver content to an audience. At a live event it\u2019s likely you just have your laptop, but at home, you may have multiple monitors so that you can move around windows and make off-screen changes\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/01\/s_7D85D8A43A72F77C800DD73331D3BC4CD2768EE61D1955657BAA888C80FC51B0_1642040704100_slide-topic.png?fit=1200%2C631&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]}],"featured_media_src_url":null,"_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/155648"}],"collection":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/comments?post=155648"}],"version-history":[{"count":13,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/155648\/revisions"}],"predecessor-version":[{"id":188184,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/155648\/revisions\/188184"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=155648"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/categories?post=155648"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=155648"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}<p><\/code> element. Paragraphs are block-level, so the background will simply be a rectangle and not follow the ragged-right-ness.<\/p>\n<span><\/code> or an inline element. The left and right padding will only apply to the very first and very last line. On each of the middle lines, the background will butt up immediately next to the text. <\/p>\n
<\/figure>\nHarry Robert’s Pseudo Element \/ white-space Method<\/h3>\n
white-space: pre-wrap;<\/code> That gives us the padding on the ragged-right lines. Then to get the padding along the left, a pseudo element is added along the left edge. Here’s the original<\/a> and then my fork to show the elements at work:<\/p>\nFabien Doiron’s box-shadow Method<\/h3>\n
.padded-multi-line {\r\n display: inline;\r\n background: orange;\r\n box-shadow: 10px 0 0 orange, -10px 0 0 orange;\r\n}<\/code><\/pre>\nbox-decoration-break: clone;<\/code> because the default is box-decoration-break: split;<\/code>. <\/p>\nDave Rupert’s JavaScript \/ Unicode Method<\/h3>\n
\\u205f<\/code>, the MEDIUM MATHEMATICAL SPACE character. This works with the padding better on the right edge<\/em> for whatever reason. For the left edge, you just use a border-left<\/code> along the block-level parent element.<\/p>\nMatthew Pennell’s Triple Element Method<\/h3>\n
<div class=\"padded-multiline\">\r\n <h1>\r\n <strong>\r\n How do I add padding to subsequent lines of an inline text element?\r\n <\/strong>\r\n <\/h1>\r\n<\/div><\/code><\/pre>\n.padded-multiline { \r\n line-height: 1.3; \r\n padding: 2px 0; \r\n border-left: 20px solid #c0c;\r\n width: 400px;\r\n margin: 20px auto;\r\n}\r\n.padded-multiline h1 { \r\n background-color: #c0c;\r\n padding: 4px 0;\r\n color: #fff; \r\n display: inline;\r\n margin: 0; \r\n}\r\n.padded-multiline h1 strong { \r\n position: relative;\r\n left: -10px; \r\n}<\/code><\/pre>\nAdam Campbell’s box-decoration-break Method<\/h3>\n
but not Firefox<\/del> now working in Firefox 32+<\/ins>, in my quick tests. Chrome and Safari require it to be -webkit-box-decoration-break<\/code>.<\/p>\nPrior Art<\/h3>\n