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; }
Related
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>
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>
on this site, there is a line underneath "Marketing Agency Fremantle".
I have used Chrome Code Inspector but cannot find what is causing this.
I want to remove the line. Thanks.
the :after pseudo element for h2 is causing the underline.
It's this CSS rule:
body.home h2::after {
content: '';
width: 60px;
height: 1px;
background-color: #4a2e69;
position: absolute;
bottom: -5px;
margin: 0 auto;
left: 0;
right: 0;
}
You can erase it or (if you can't do that) add the following to set height to 0 and make it invisible that way:
body.home h2::after {
height: 1px !important;
}
There is :after in your h2 tag
I am having an issue with IE11 and utilizing the CSS calc() function along with display: inline-block and/or display: inline-table.
Currently I have a text input and a button that should be next to each other (inline), with the button always being a fixed width and the input should take up the available space leftover (i.e. calc(100% - 92px)). Both elements are display: inline-table;. In all other browsers, doing this calc() worked fine. In IE11, it drops the button to the next line.
Included in the JSBin are a couple styles at the bottom that make the elements appear inline, although this fix will not work for an end result. What I did was added display:inline-block to both the input & button and also removed padding and border from the input. At the end of the day, the input **must have padding & border` so this will not work for my use case.
^^ box-sizing: border-box fixed that "hack", but the issue as a whole still exists in IE11.
Here is the JSBin (in order to see the issue, you must be using IE11)
The CSS, as it stands now, looks like this...
body, dd, figure, form {
margin: 0;
}
form {
margin-top: 1.6875rem;
width: 100%;
margin-right: auto;
margin-left: auto;
}
form fieldset {
margin: 0;
padding: 0;
border:0;
}
input {
border: none;
border-radius: 0;
outline: 0;
margin: 0;
padding: 0;
text-align: left;
}
input {
font-size: 12px;
line-height: 15px;
display: inline-table;
padding: 4px 12px 5px;
border: 1px solid #000;
border-radius: 0;
background-color: #fff;
color: #999;
font-style: italic;
font-weight: 300;
vertical-align: top;
margin: 6px 0 14px;
margin-top: 0;
margin-bottom: 0;
width: calc(100% - 92px);
height: 40px;
}
button {
border: 0;
height: 40px;
text-transform: uppercase;
margin-top: 0;
margin-bottom: 0;
font-size: 13px;
display: inline-table;
position: relative;
padding: 0;
background-color: #000;
color: #fff;
width: 92px;
}
I'm assuming there is a bug with IE11 and calc() in which calc() doesn't take into account the border/padding when an element is display:inline-block or display:inline-table, although I could not find anything in my research to suggest this 100%.
Ultimately my question is, how do I get two elements to be "inline" with one being a fixed pixel value and the other a percentage width that is cross browser compliant.
EDIT: added box-sizing: border-box which made the display: inline and padding/border: 0 obsolete at the bottom of the JSBin. The issue still persists in IE11 though.
The answer to my question is as follows...
As Adam mentioned in the comments above, adding box-sizing: border-box; to, at the very least, the input & button elements fixed the issue where the border/padding was not being calculated in the calc() function.
In addition to that, changing display: inline-table to display: inline-block fixed the issue in IE11.
I'm trying to get a ribbon-like banner effect for a header:
My markup is this:
<header>
<div id="logo">
<img src="">
</div>
</header>
I was thinking I could use pseudo :before and :after elements on the <img>, creating extra white space above and below the image to fake the extended `div:
#logo-wrap img:after {
content: '';
display: inline-block;
position: absolute;
left: 10px;
top: 10px;
width: 100px;
height: 100px;
background-color: #000;
}
And then another :before and :afterpseudo elements for the "shadow-fold".
My problem is: if I end up doing it like this, I'll have to insert another div between #logoand <img> in order to add another pair of :before and :after pseudo elements for the bottom "shadow-fold" and I think I'm having problems using the pseudo elements on the <img> element (nothing is appearing).
Can you shed some light and guide me on the right direction, pls? Perhaps, there is a simple way to just "shrink" the <header>?
EDIT
So, :before and :after can't be used with <img>. Thank you for the info :)
What I would like to know is if there is another way to achieve what I desire instead of wrap-wrap-wrap? :P
i.e: is there a way to make the #logo be bigger than <header> despite being its child and its height being the same (since the <header> has always the same height as the <img>)?
Thanks
I think you're on the right track. I would use borders, but I would make your pseudo-elements be behind the logo like so:
body,html {margin: 0; padding: 0;}
header {
background: #eee;
text-align: center;
margin: 1em 0;
}
#logo {
display: inline-block;
vertical-align: top;
position: relative;
margin: -0.5em 0;
}
#logo:before, #logo:after {
content: '';
position: absolute;
width: 100%;
left: -0.25em;
border: 0 solid transparent;
border-width: 0.5em 0.25em;
color: #aaa; /* set so we only have to have the border color in one place.
if not specified, border color is the same as the text
color. */
}
#logo:before {
border-top: none;
border-bottom-color: initial;
top: 0;
}
#logo:after {
border-bottom: none;
border-top-color: initial;
bottom: 0;
}
#logo img {
position: relative;
display:block;
z-index: 1;
}
<header>
<div id="logo">
<img src="//placehold.it/300x100?text=LOGO"/>
</div>
</header>
The concept is that the pseudo-elements are 100% width of the logo with a little bit extra (determined by the border attributes). Then you use both left and right borders simultaneously. There's a few other tricks in that code that help simplify it, but the general idea is to let your pseudo-elements peek out from behind the logo itself.