1
CSS:
.mark-style {
background-image: linear-gradient(to right, transparent 50%, rgb(183, 202, 88) 50%);
background-size: 200% 90%;
font-size: inherit;
background-repeat: repeat-x;
background-position: -100% 30%;
transition: background-position 0.5s ease 0s;
}
.container {
width: 250px;
line-height: 2em;
}
Sample text:
<div class="container">
Nonnono nono
<span class="mark-style">
nonono nono nonono nonono
nonono nononono nononno nono
<br>
nonono nono nonono nonoonono
</span>
no onno nono. No noonno nonono nonono.
</div>
How do I do in the CSS so that all lines in the class have the border-radius: 10px;, see that I can’t create separate spans?
The text is currently like this:
When I put border-Radius, it gets like this:
But I’d like it to stay that way, it’s possible to do this in CSS?
Only with CSS will not do... Besides, particularly, I found it strange, it looks like two independent selections, and not that it is a continuous thing being part of a single sentence...
– hugocsl
I agree with you, but I’m not the design guy, I’m just following the layout you gave me, if I’m not mistaken, the pdf does this when you select a text. But this example is just to understand the question, in case the rounded corners will be smaller. The idea is that it looks like a bookmarking pen.
– Ivan Ferrer