i think there's way :after pseudo-element, can't quite figure out.
this cms , don't have ability edit what's in between div class=entry-text tags.
i have div <p> inserted, <a><img /></a> before text, text.
i want text spaced below image if exists, , want drop-cap on text.
<div class="entry-text"> <p>this text</p> </div> <div class="entry-text"> <p><a href="#"><img src="myimage.jpg" class="entry-image" /></a> text</p> </div> <style> div.entry-text > p::first-letter, div.entry-text > p > a::after::first-letter { float: left; color: red; font-size: 300%; line-height: 30px; padding: 10px 5px 0 5px; content: ""; } div.entry-text > p > a::after { margin-top: 15px; content: ""; } </style>
the ::first-letter pseudo element not working on inline elements. works if parent block-level element. since p block-level element works fine when there's text.
if there's other markup before text such <a href> or example <div>, ::first-letter won't target first letter, see example of talking about.
suggestion 1: wrap text span, inline element , set display block.
div.entry-text > p > span::first-letter { color: red; font-size: 300%; line-height: 30px; padding: 0 0 0 0; content: ""; } span { display: block; }<div class="entry-text"> <p> <span>this text</span> </p> </div> <div class="entry-text"> <p> <a href="#"> <img src="myimage.jpg" class="entry-image" /> </a> <span> text </span> </p> </div>suggestion 2: in
.entry-text img, use p tag around text. div.entry-text > p::first-letter { color: red; font-size: 300%; line-height: 30px; padding: 10px 5px 0 5px; content: ""; } div.entry-text > p > a::after { margin-top: 15px; content: ""; } div.entry-text > p > > img { position: relative; }<div class="entry-text"> <p>this text</p> </div> <div class="entry-text"> <p> <a href="#"> <img src="myimage.jpg" class="entry-image" /> </a> <p> text </p> </p> </div>suggestion 3 (not best one, @ least
::first-letter works): put <img> after text , use float:left; place before text. div.entry-text > p::first-letter { color: red; font-size: 300%; line-height: 30px; padding: 10px 5px 0 5px; content: ""; } div.entry-text > p > a::after { margin-top: 15px; content: ""; } div.entry-text > p > > img { float:left; }<div class="entry-text"> <p>this text</p> </div> <div class="entry-text"> <p> text <a href="#"> <img src="myimage.jpg" class="entry-image" /> </a> </p> </div>