Text highlight with padding and line breaks IN SYMBOL solution

Design help Design inspiration
1

I wanted to have this highlight style on image captions, and have the captioned image as a symbol.

image
image1758×1356 229 KB

Problem: achieving this effect requires a <span> which gets lost when overriding text in a symbol.

Solution: Add Javascript to the Body that adds a <span> around .image-caption (or whatever your class is)

<script>
$("div.image-caption")
    .contents()
    .filter(
        function(){
            return this.nodeType != 1; 
        })
    .wrap("<span/>");
</script>

Then use CSS to target the <span> child of your class, and style it however you like:

<style>
.image-caption > span {
  background-color: white;
	box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
  -ms-box-decoration-break: clone;
  -o-box-decoration-break: clone;
  box-decoration-break: clone;
  padding: 3px 8px 3px 8px;
}
</style>

I presume this solution could also be used for a CMS collection where you want a span around dynamic text.

Note: I noticed in my screenshot I used the incorrect form of “its”, so you grammar folks can rest assured I discovered my mistake and fixed it, but was too lazy to replace the screenshot…

Cheers!