The titles in my webpage are also a link that anchor to themselves, for accessibility reasons, I cannot really change that.
However, most people would like something in the likeness of 🔗 Title with only the 🔗 being a clickable link.
So my html looks like
<h2 id="myid">Title</h2>
And my CSS (so far):
h2 a::before { content: "🔗 "; }
However, I am far from having the wizardry to know what to do next, I tried looking at this question but I don't really know how to "save" the ::before part from being affected.
It's a bit tricky but you could set a fixed width for the 🔗 character and overlap the h2::after pseudoelement for the entire length of the element minus the width of the a::before pseudoelement so the text can't be clicked.
It's worth noting that this will reduce the usability of the page so be careful on using this approach
h2 {
position: relative;
display: inline-block;
}
h2::after {
position: absolute;
z-index: 1;
content: "";
right: 0;
height: 100%;
width: calc(100% - 1.25em);
}
h2 a::before {
content: "🔗";
display: inline-block;
border-bottom: 1px dashed yellowgreen;
width: 1.25em;
}
h2 a {
text-decoration: none;
color: inherit;
}
<h2 id="myid">Title</h2>
Related
This question already has answers here:
Thick underline behind text
(7 answers)
Closed 8 months ago.
I am trying to use a background color on text only, which works fine on single lines, but when the line breaks in responsive mode it ends up looking like this:
Does anyone know what to add to make the yellow background line follow the text on mulitple lines?
This is my code:
.background-highlight {
position: relative;
display: inline-block;
color: #faf9f4;
}
.background-highlight:after {
content: '';
position: absolute;
width: 100%;
height: 10px;
left: 0;
top: 50%;
background-color: #cef230;
z-index: -1;
}
Thanks a lot in advance,
I have used box-decoration-break: clone; property for mainting the same design for multiple lines don't forget to add display: inline; to its child where background is added. in child I have used linear gradient you can generate according to you from here. you can chenge the position of green strip by adjusting gradient values from the site.
.background-highlight {
position: relative;
display: inline-block;
color: #000;
-webkit-box-decoration-break: clone;
box-decoration-break: clone;
font-size: 120px;
}
.background-highlight span {
display: inline;
background: rgb(206,242,48);
background: -webkit-gradient(linear, left bottom, left top, color-stop(11%, rgba(206,242,48,1)), color-stop(12%, rgba(255,255,255,0)));
background: -o-linear-gradient(bottom, rgba(206,242,48,1) 11%, rgba(255,255,255,0) 12%);
background: linear-gradient(0deg, rgba(206,242,48,1) 11%, rgba(255,255,255,0) 12%);
}
<h1 class="background-highlight"><span>The skippers escape</span></h1>
It is fault of pseudo element that is forced to break between two lines.
The cause is the way the effect is carried out, pseudo element ::before creates a single rectangle that has no way of splitting up to follow words flow. Posible solutions:
Make sure links never occupy more than 1 line. You can use
white-space: nowrap;
Redesign the effect applying box border to main element. For example:
.background-highlight {
width: max-content;
border-bottom:5px solid rgb(217, 255, 0);
}
<div class="background-highlight">THE SKIPPER´S ESCAPE</div>
Pseudo-element solution
Use the bottom-positioning value on the pseudo-element instead of top. This forces the pseudo-element to be positioned at the bottom, instead of 50%from the top. I used bottom: -10px as that is the height of the pseudo-element, so it aligns perfectly.
Read more on position values: https://developer.mozilla.org/en-US/docs/Web/CSS/position
HTML-element solution
Instead of creating a pseudo-element, you could opt to make an HTML element instead.
Make a parent container, apply flex to it so the text and the line will align.
Make the .line-element a block element, so it will break into a new line.
You can still apply position: absolute and position: relative on the .line and the h2 if you want to position it in another way. Or you could simply use e.g. transform: translateY(5px) to move the line up a bit.
.background-highlight {
position: relative;
display: inline-block;
color: black;
text-align: right;
}
.background-highlight:after {
content: '';
position: absolute;
width: 100%;
height: 10px;
left: 0;
bottom: -10px;
background-color: #cef230;
z-index: -1;
}
/* Without pseudo */
.nopseudo {
display: flex;
}
.nopseudo h2 {
text-align: right;
}
.nopseudo .line {
height: 10px;
width: 100%;
background-color: #cef230;
display: block;
}
<h2 class="background-highlight">The Skippers <br>Escape</h2>
<div class="nopseudo">
<h2>The Skippers <br>Escape<span class="line"></span></h2>
</div>
I don't know how is your structure but this might help.
We just need two div elements, one as a container to setup the width property and the text holder in this case I will use a h2 tag.
Just mkae the ::after pseudo element as display and the .background-highlight's width can be width: match-content or 100% in this case if you just want to cover the text use match-content if you want to cover the width of the .title element use 100%
.title {
width: 90vw;
text-align: end;
}
h2 {
text-transform: uppercase;
color: #374650;
}
.fullwidth {
width: 100%;
}
.match {
width: match-content;
}
.background-highlight {
position: relative;
display: inline-block;
}
.background-highlight:after {
content: '';
display: block;
width: 100%;
height: 10px;
background-color: #cef230;
z-index: -1;
}
<div class="title">
<h2 class="match background-highlight">
The Skipper's <br>Escape</h2>
</div>
<div class="title">
<h2 class="fullwidth background-highlight">
The Skipper's <br>Escape</h2>
</div>
This question already has answers here:
Thick underline behind text
(7 answers)
Closed 1 year ago.
I'm using Foundation 6 (just a little bit of background) and in a project, several titles are styled this way:
the title with a blue border
You can ignore the brigther blue background. It's possible to make that border that covers the title using anything in CSS? I'm currently using this file as a SVG, but I know this is not SEO/acessible friendly, and I really think .svg is more a hack than the actual solution.
I don't know if the solution resides on:
border-bottom: solid 1px blue;
Or something else?
https://jsfiddle.net/32yahu0v/
h1::before{
z-index: -1;
content: " ";
width: 120px;
position: absolute;
padding-top: 20px;
border-bottom: 15px solid blue;
}
<h1>
My Title
</h1>
You can use border-bottom for that to work, but there will be a gap.
If you want the line to go through the the text, you could try and use a :before or :after pseudo element on the title
here is a codepen https://codepen.io/Spoochy/pen/QWGPoPZ
/* the styling that you actually need */
p {
position: relative;
}
p:after {
content: '';
background: blue;
position: absolute;
left: 0;
right: 0;
bottom: 2px;
height: 10px;
z-index: -1;
}
/* styling to make everything prettier and you don't need*/
body {
background: #29b5e8;
display: flex;
align-items: center;
justify-content: center;
min-height: 100vh;
}
p {
color: white;
font-size: 35px;
font-family: sans-serif;
position: relative;
}
<p>conectamos</p>
Here is a link to the BUG, only shown in firefox( chrome is ok).
The problem is with the stars (active, inactive), and try to click on one-two radio.
I have this css, but it is not working right
/* STARS */
.star-icon {
color: #ddd;
font-size: 1.4em;
position: relative;
}
.star-icon.full:before {
color: #fdb229;
content: '\2605'; /* Full star in UTF-8 */
position: absolute;
left: 0;
}
.star-icon.half:before {
color: #fdb229;
content: '\2605'; /* Full star in UTF-8 */
position: absolute;
left: 0;
width: 50%;
overflow: hidden;
}
#-moz-document url-prefix() { /* Firefox Hack :( */
.star-icon {
font-size: 20px;
line-height: 10px;
}
}
/* STARS */
Change line-height: 10px; to line-height: 17px;
#-moz-document url-prefix("") {
.star-icon {
font-size: 20px;
line-height: 17px;
}
}
Why are you doing this in this way? Font line-height's could be interpreted different in different browsers. Maybe this could help: http://yuilibrary.com/yui/docs/cssreset/
but I recommend you to do it with images (if you want to use half-stars and be sure that everything is ok in any browser).
As previously mentioned by Patryk you shouldn't be using line-height to position elements. If I were you, I'd have floated block elements with fixed height and width and then positioned the pseudo-element centrally using absolute positioning.
Another solution in this case is to scrap the whole #-moz-document override and just add:
width: 1.4em;
I've checked it in both Chrome and Firefox. I suspect the issue is because span's are naturally inline element and don't have set width's.
The link "CATEGORIAS" (marked in purple) redirects to the main page and the "+" sign opens a dropdown. So if the user click through the link "CATEGORIAS" would be redirected to the main page.
We want to occupy 100% width of the screen with the :after pseudo-element covering the link. So if the user click in "CATEGORIAS", its really clicking the :after element.
http://i.imgur.com/z3QIrCU.jpg
http://i.imgur.com/ORJguW0.jpg
span {
position: absolute;
top: 0;
width: 100%;
height: 30px;
background-color: rgba(137,142,236,0.5);
}
span:after {
font-family: "FontAwesome";
content: "\f067";
font-size: 26px;
color: #7f7355;
cursor: pointer;
top: 3px;
}
Thank you
Have you tried this? Works for me.
.menu-mobile-grover,
.menu-mobile-grover:after {
width: 100%;
}
We have custom link with dotted underlined style.
How can I reduce the gap? Currently padding: 0; and line-height is not working.
Here's something you could try that is a bit verbose, but if you really want to close the gap you could try adding an absolutely placed pseudo element that recreates the underline.
Here's my Fiddle.
Edit: Here's a Fiddle updated by #bradchristie in the comments with a before and after using the OP's styles.
And here's my CSS:
a {
background: #ff0;
color: #f00;
position: relative;
text-decoration: none;
}
a::after {
border-bottom: 1px dotted #f00;
bottom: 3px;
content: '';
height: 0;
left: 0;
position: absolute;
right: 0;
}
Since you are not using underline but a bottom border, the space is there to accommodate any text that might be there, including descenders and diacritic marks that might appear below the baseline. So you would need to defeat normal line formatting, e.g. by using trickery that reduces the content height, e.g. by setting
a { display: inline-block; line-height: 0.8; height: 0.8em; }