Is there a way to expand the space between letters and underlines in text-based hyperlinks using CSS?
The CSS I'm planning to use is:
.post-body a {
text-decoration: underline;
}
My blog is hosted on Blogger and uses the Simple template - http://nickalive.blogspot.com
No, not using standard text-decoration settings.
What you can do is replace the underline with a pseudo-element which you can customise to your heart's content.
a {
text-decoration:none;
margin:1em;
display: inline-block;
position: relative;
}
a:after {
content:"";
position: absolute;
left:0;
bottom:-12px; /* changes distance from text */
width:100%; /* width of underline */
height:5px; /* height of underline */
background: red; /* color or underline */
}
My hyperlink
Text-Decoration # MDN
Related
Googled myself stupid, still couldn't seem to find any information on it. Following issue:
Adding an ::after selector to a link adds it as part of the link. Is there a way that the ::after selector will not extend the link (be text only, not clickable)? See example, is there a way, that the "»" will not be part of the link?
Example:
a::after {
content: " »";
}
Test
Make its width 0 and add pointer-events: none;
a::after {
content: " »";
display:inline-block;
margin-left:8px;
width:0;
pointer-events: none;
}
a {
font-size:35px;
margin-right:20px; /* to avoid overflow issue and cover the area of the pseudo element */
}
Test some text after
What's the most straightforward way to style HTML headings such that they are both underlined and horizontally centered? I don't want the underline to extend to the full width of the container, just the words. I also want the underline to be a different colour from the text and some distance away.
At the moment I am using a span inside the h2 to achieve this (in Sass):
h2 {
text-align: center;
span {
border-bottom: 2px solid #e6ebdf;
}
}
Is there a way to do so without an inner span or adding styles to the parent container? Here's the result. Note how the underline is (a) a different colour from the text and, (b) not tight against the bottom of the text the way it would be using text-decoration: underline:
Another idea is to use table to center and then apply a gradient where you can easily adjust the size, position and color:
h2 {
display:table;
text-align:center;
margin:auto;
padding-bottom:5px; /*control the distance*/
background:
linear-gradient(red,red) bottom /80% 2px no-repeat;
/* position /width height */
}
<h2>Hello</h2>
You can do this with the following:-
h2 {
text-decoration: underline;
text-align: center;
text-decoration-color: red;
text-underline-position: under;
}
<h2>Hello</h2>
Browser support maybe limited though, you may need to check.
I have a full browser width list with a background color (which changes color on hover). However I want the li text to be text-align:left, have a max-width and the left and right margins to be equal – but the background color to still be full browser width. How do I do this?
I have made a JSfiddle here.
As soon as I put a max-width on the li, the background color will obviously shrink to the max-width. Is there a way to just target the text within the list?
<div class="case_study_links">
<ul>
<li>Abbey Meadow Flowers<br>Helping to grow a sustainable florists</li>
<li>Collins Environmental<br>Differentiating ecologists from competitors</li>
<li>University of Oxford<br>Branding for research project on young migrants</li>
<li>Small Woods<br>New brand brings credibility to organisation</li>
<li>Good Energy<br>Rebranding helps double customer numbers</li>
</ul>
</div>
.case_study_links li {
list-style: none;
font-size:1.8rem;
text-align:left;
border-top:1px solid white;
}
.case_study_links a:link { color:white; display:block; padding:4.8rem 0; background-color:rgb(149,199,201);}
.case_study_links a:visited { color:white; display:block; padding:4.8rem 0; background-color:rgb(149,199,201);}
.case_study_links a:hover { color:white; display:block; padding:4.8rem 0; background-color:rgb(134,179,181);}
.case_study_links a:active { color:white; display:block; padding:4.8rem 0; background-color:rgb(134,179,181);}
wrap Your text in a <span class="myTexts"> and add css properties to it:
.myTexts
{
max-width:100px; // or anything you want
margin:auto
}
U have your CSS on wrong levels:
Define background-color on the ul (maybe width: 100%; too, didn't test)
Define borders and width: 100%; on the li
Define max-width: ; on the a, or the elements within a
As suggested, you could wrap a part of the text in a span element.
I would refrain from using "br", you could do this:
<li><p>Abbey Meadow Flowers</p><p>Helping to grow a sustainable florists</p></li>
Change the P elements accordingly for semantic HTML to H1,H2,H3,span,p, etc.
Note that span is an inline element, and will not automatically take up full width. Use display: block; in your CSS to fix this
I recently finished a website in wordpress and modified a template a bit.
Now my customer wants a element before a text-links, so i tried adding a :before as shown
a:before {
content:url('triangle.png');
width:3px;
height:5px;
margin: 5px;
}
what it does, works great so far:
But my problem is that I have image links on my site as well, and it crashes my layout.
Is it possible to apply the a:before only for the links in the textarea ?
have you tried following:
a:before > img {
content:"";
width:3px; /*maybe these styles are also not necessary for your layout*/
height:5px; /* then you can set them al to 0 */
margin: 5px;
}
I'm trying to create my very own css menubar and I am learning a lot. Unfortunately I am stuck on this one piece and I can't figure out how to get around it. My menubar is to long so I use line breaks to wrap each menu element around but its not letting my menu to run across the menu bar. Can you tell me what I am missing here?
<div id="menucontainer">
<ol id="navlinks">
<li>COMPANY<br />OVERVIEW</li>
<li>CLIENTS<br />TESTIMONIALS</li>
<li>ACCREDITATION<br />SERVICES</li>
<li>LEGAL<br />SUPPORT</li>
<li>TRAINING</li>
<li>CONSULTING<br />SERVICES</li>
<li>FREE<br />POLICY CENTER</li>
<li>IN THE NEWS</li>
<li>STRATEGIC<br />PARTNERS</li>
</ol>
</div>
CSS Code:
/* We set the width and color of the background for a menu wrapper. */
#menucontainer{width: 1021px; height: 61px; background-color:#0C318C; margin: auto; padding-top:5px;}
/* We target the top of the order list and remove the list properties. */
#navlinks li {display: inline; list-style: none;}
/* This line sets the font style of the bullet menu */
ol{font-size: 12px; font-family: 'Tinos', serif;line-height: 18px;}
/* We target the li items with and without a hyper link and color the font white. */
li, li a {text-decoration: none; color: white;}
I put it up on JFiddle and you can find it here: http://jsfiddle.net/L4sTB/
Thanks,
Frank G.
Check this fiddle.
I have made changes to the following CSS rule.
#navlinks li {
display: inline-block; /* to display the menu items as blocks in same line */
list-style: none;
text-align: center; /* center align the text within the block */
width: 10%; /* set each block a width */
vertical-align: middle; /* align the contents to middle vertically */
}
You can set display:inline-block to your li elements and it will span the width of your nav bar: http://jsfiddle.net/shaunp/L4sTB/3/
Is this your desired effect?
The list should be inline-block. I added center align text and a border to each.
#navlinks li {display: inline-block; list-style: none;text-align:center;border: 1px solid white;}