Highlight text - how to have consistent padding?

Klee

New Member
I can't get this paragraph to display as I want to. The padding between the text and the end of the background should be consistent on every line as shown in this image(I can't paste image below due to my reputation score). Can this be fixed with only css? Thanks!Update: I solved this by simply replacing the padding with box-shadow:\[code\].highlight-title p {box-shadow: 10px 0 0 0 red, -10px 0 0 0 red;background-color: red;display: inline; color: #000; font: 1.9em 'oswald';line-height: 60px;}\[/code\]End UpdateMy markup:\[code\]<div id="title-image-container"> <?php echo '<img src="'.get_post_meta($id, 'title-image', true).'">' ?> <div class="highlight-title"><p><?php the_title(); ?></p></div></div> \[/code\]The css:\[code\]#title-image-container { float: left;}.highlight-title { position: relative; top: -300px; padding: 5px 5px 5px 10px;}.highlight-title p { background-color: red; display: inline; color: #000; font: 1.9em 'oswald'; line-height: 60px; padding: 0 10px;}#content img { height: auto; margin: 0; max-width: 100%;}\[/code\]
 
Back
Top