This question already has answers here:
“text-decoration” and the “:after” pseudo-element, revisited
(11 answers)
Closed 8 years ago.
The goal of my question is to create a code which adds the filetype after a link (so that people know whether they should expect any special files). Now there are options to do this using an image, but I don't really like it and I would prefer to have the file type between square brackets in a different size. My approach is to use the :after pseudoclass in the following way
a[href$='.doc']:after, a[href$='.rtf']:after {
content: " [DOC]";
font-family: Monospace;
font-size: 60%;
font-weight:bolder;
color:red;
position:relative;
top: -0.8em;
}
However, this gets me a very strange problem. The content seems to be in a block which is part of the link. Therefore the link underlining continues after the link under the "[DOC]".
So the question is pretty straightforward: Is there a way to either do this in another way or to make sure that I can control what is under the "[DOC]" separately from what is under the link?
Try adding display: inline-block;
a[href$='.doc']:after, a[href$='.rtf']:after {
content: " [DOC]";
display: inline-block;
font-family: Monospace;
font-size: 60%;
font-weight:bolder;
color:red;
position:relative;
top: -0.8em;
}
not tested in IE but I think IE has trouble with attribute selectors and :after or both.
I hope someone will swoop down and point out a cleaner way, but this works:
Live Demo
HTML:
<span>lol</span>
CSS:
a {
text-decoration: none
}
a span {
text-decoration: underline
}
a[href$='.doc']:after, a[href$='.rtf']:after {
content: " [DOC]";
font-family: Monospace;
font-size: 60%;
font-weight:bolder;
color:red;
position:relative;
top: -0.8em;
}
All: I will probably stick to an image since that seems to be a bit more robust (in terms of supporting browsers). My naive view of the world, that a plain text should always be easier than an image is wrong in this case ;).
Related
I'm re-asking this question because its answers didn't work in my case.
In my stylesheet for printed media I want to append the url after every link using the :after pseudo-class.
a:after {
content: " <" attr(href) ">";
text-decoration: none;
color: #000000;
}
In Firefox (and probably Chrome but not IE8), text-decoration: none is ignored, and the underline stretches unattractively across the bottom of the url. The color however is correctly set to black for the url. Is there a way to make the text-decoration work?
The original question appended fixed size images instead of variable width text. Its answers use padding and background images to avoid having to use the text-decoration property. I'm still looking for a solution when the content is variable width text.
If you use display: inline-block on the :after pseudo, the text-decoration declaration will work.
Tested in Chrome 25, Firefox 19
IE8's implementation of the :before and :after pseudo-elements is incorrect. Firefox, Chrome and Safari all implement it according to the CSS 2.1 specification.
5.12.3 The :before and :after pseudo-elements
The ':before' and ':after'
pseudo-elements can be used to insert
generated content before or after an
element's content. They are explained
in the section on generated text.
...
Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification
The specification indicates that the content should be inserted before or after the element's content, not the element (i.e. <element>content:before content content:after</element>). Thus in Firefox and Chrome the text-decoration you're encountering is not on the inserted content but rather on the parent anchor element that contains the inserted content.
I think your options are going to be using the background-image/padding technique suggested in your previous question or possibly wrapping your anchor elements in span elements and applying the pseudo-elements to the span elements instead.
I had the same problem and my solution was to set height and overflow:hidden
http://jsfiddle.net/r45L7/
a {
text-decoration: underline;
}
a:after {
content: "»";
display: inline-block;
text-decoration: none;
height:16px;
overflow: hidden;
padding-left: 10px;
}
It works on IE, FF, Chrome.
As an alternative, you can use a bottom border rather than a text-decoration.
This assumes that you know the color of the background
a {
text-decoration: none;
border-bottom: 1px solid blue;
}
a:after {
content: "foo";
border-bottom: 1px solid white; /* same color as the background */
}
1)
:after{
position: absolute;
}
is not perfect, because element content will not wrap
2)
:after{
display: inline-block;
}
is not perfect, because sometimes we wish after content should always wrap with last word of element content.
For now, I could not find find a perfect solution fits all 3 conditions(1. content could auto-wrap if it's too long 2.after content should wrap with element content, which means after content should not occupy single by it self. 3.text-decoration should only apply on element condition not apply to after content.)
I thoughts for now is using other way to mimic text-decoration.
What I do is I add a span inside the a element, like this :
<span>link text</span>
Then in your CSS file :
a::after{
content:" <" attr(href) "> ";
color: #000000;
}
a {
text-decoration:none;
}
a span {
text-decoration: underline;
}
The only thing that worked for me was declaring a separate repeated selector with the same text-decoration property that it was inheriting from its parent, then in the main selector, setting text-decoration to none.
IE apparently does not know what to do when you set text-decoration: none on a pseudo element without that element having the text-decoration property declared (which by default, it has nothing declared by default). This makes little sense because it is obviously being inherited from the parent, but alas, now we have modern browsers.
span.my-text {
color: black;
font-size: 12px;
text-decoration: underline;
}
span.my-text:after {
text-decoration: underline; // Have to set text-decoration here so IE knows it can be overwritten below
}
span.my-text:after {
color: red;
text-decoration: none; // In the same repeated selector, we can now overwrite text-decoration in our pseudo element.
}
I realise this isn't answering the question you're asking, but is there a reason you can't use the following (background-based approach):
a.file_pdf {
background-image: url(images/pdf.png);
background-position: center right;
background-repeat: no-repeat;
padding-right: 15px; /* or whatever size your .png image is plus a small margin */
}
As far as I know, the Firefox implementation of :after observes the property of the selector's class, not the psuedo-class. It might be worth experimenting with different doctypes, though? The transitional, rather than strict, sometimes allows for different results (albeit not always better results...).
Edit:
It appears that using
a:after {
content: " <" attr(href) ">";
text-decoration: none;
color: #000000;
background-color: #fff; /* or whatever colour you prefer */
}
overrides, or at least hides, the text-decoration. This doesn't really provide any kind of answer, but at least offers a workaround of sorts.
You can autoselect links to pdf-files by:
a[href$=".pdf"]:after { content: ... }
IE less than 8 can be enabled to work properly by implementing this link in the head of the html-file:
<!--[if lt IE 8]><script src="http://ie7-js.googlecode.com/svn/version/2.0(beta3)/IE8.js" type="text/javascript"></script><![endif]-->
It works also very good in al IE versions when you use the after-before-content-thing for dosplaying quotation marks.
Position the content absolutely as follow:
a {
position: relative;
margin: 0 .5em;
font-weight: bold;
color: #c00;
}
a:before,
a:after {
position: absolute;
color: #000;
}
a:before {
content: '<';
left: -.5em;
}
a:after {
content: '>';
right: -.5em;
}
This works for me in Firefox 3.6, not tested in any other browsers though, best of luck!
Hi I was also having trouble with this as well and happened to stumble across a workaround.
To get around it, I wrapped the URL in div and used something like this.
.next_page:before {
content: '(';
}
.next_page:after {
content: ')';
}
I can't seem to change the font-size for the Ionic input. I've tried
input {
font-size: 30px;
}
but that doesn't work. However,
input {
font-family: Times;
}
works, so I don't know what exactly is the problem. I can't even change the height of the input as
input {
height:100px;
}
does not work.
However, when I take out the line in my HTML referencing the Ionic CSS, (lib\ionic\css\ionic.css), my CSS works. I think my CSS should be overriding the Ionic CSS as my CSS comes after it, so what's happening, and how do I fix it?
EDIT:
Even if I put !important, it doesn't work. Interestingly enough,
input {
height:100px; !important
font-family: Times;
}
makes it so that the font doesn't change, while
input {
font-family: Times;
height:100px; !important
}
does change the font.
EDIT2: The problem was with selector specificity:
textarea, input[type="text"]... {
display: block;
padding-top: 2px;
padding-left: 0;
height: 34px;
color: #111;
vertical-align: middle;
font-size: 14px;
line-height: 16px;
}
was overriding it, so I just changed my CSS to
input[type="text"] {
font-size:30px;
}
and it worked!
It is very likely that the specificity stated in the framework is greater than what you are providing in your CSS.
Using dev tools to track down the specific style by inspecting the element should show you how the framework defined its selector.
As some have mentioned, using !importantcould solve this, but it is not a recommended solution as it cheat its way to the max specificity and can't be overwritten later on, except by being more specific with a selector and including the important statement.
You need to put !important before semicolon.
I have a single line with 1 icon and 2 pieces of text - I would like to display the right-most piece of text on the far right of the line, with the other items aligned left.
I'm trying to keep the code as lean as possible so I'd like to see if this can be done without using floats, without wrapping each <p> in a <div> of its own and also without JS (which is why I couldn't find an appropriate answer from similar questions asked on here).
Here's the JSFiddle, I'd like to have the word Break displayed on the far right of the line and have the task take up the rest of the width of the containing div:
http://jsfiddle.net/2w1cu71e/
Thank you in advance for any help you might be able to give me, I'm finding it a bit hard to find definitive resources on CSS best practices (aside from CSS Tricks!).
Ines
You only need to add position:absolute;right:0; to .task-category but this markup might be made far simpler if you don't have a reason to be using the <p> elements at all.
All-in-all, I don't see the difference to using a float. There's also the question as to why the <p> is an inline-block but you have your reasons.
I think using <p> tag there doesn't make sense, <span> would be better for doing the job. For the layout I think CSS table table-row table-cell can be a good option over flexbox, and it works on all browsers.
DEMO: http://jsfiddle.net/2w1cu71e/1/
#done {
display: table;
width: 100%;
}
.desc-single-line {
display: table-row;
}
.desc-single-line i,
.desc-single-line span {
display: table-cell;
}
.desc-single-line i {
width: 20px;
}
.desc-single-line span {
font-size: 0.8em;
font-family: 'Open Sans', sans-serif;
}
.desc-single-line .task-category {
color: red;
text-align: right;
}
can you try this instead of the CSS provided? For some reason it doesn't work on jsfiddle but it works just fine on a local html file.
.desc-single-line {
display: flex;
flex-direction: row;
}
.task-category{
color:red;
text-align: right;
flex: 2;
}
.desc-single-line p{
font-size: 0.8em;
font-family: 'Open Sans', sans-serif;
}
I'm trying to put a dropcap in a paragraph by using a . I think I found the correct workflow and tested it already in another area of my website, it worked great. When I want to apply the same technique to the desired paragraph, the content, the first letter of the paragraph, changes when viewed in browser to "03/". I've tried several different options but always same outcome.. When I inspect element in chrome, it shows "03/" as content, which is not correct. Does anyone know what might cause this?
css:
#services .firstcharacter { /*displays /03 instead of character*/
float: left;
color: #000;
font-size: 75px;
line-height: 80px;
padding-top: 4px;
padding-right: 8px;
padding-left: 3px;
font-family: Georgia; }
html:
<p><span class="firstcharacter">N</span>ulla...</p>
paragraph screenshot
Thanks!
EXTRA INFO
At first I removed #services, but no changes.. Afterwards I wrote code differently like this:
CSS
.service p.char a{
float: left;
color: #000;
font-size: 75px;
line-height: 80px;
padding-top: 4px;
padding-right: 8px;
padding-left: 3px;
font-family: serif;
}
HTML
<p class="char"><a><span>D</span></a>ulla...</p>
But nothing changed.
When I inspect the element in browser (chrome), the span's content has changed to 03/. But when I change it there, the character "D" or whatever is displayed correctly.
Can't really see where this error might be.. I checked my entire code for the "03/" combination as well and changed font settings, but no luck there either.
As I don't know full code, I can only suggest you removing #services from css. Or add <meta charset="UTF-8"> to <head>. Or both.
By dropping the in html, I solved the problem..
Now I have my solution, but would still like to know why this happened.
Thanks for the replies and for helping me find the cause.
I'm re-asking this question because its answers didn't work in my case.
In my stylesheet for printed media I want to append the url after every link using the :after pseudo-class.
a:after {
content: " <" attr(href) ">";
text-decoration: none;
color: #000000;
}
In Firefox (and probably Chrome but not IE8), text-decoration: none is ignored, and the underline stretches unattractively across the bottom of the url. The color however is correctly set to black for the url. Is there a way to make the text-decoration work?
The original question appended fixed size images instead of variable width text. Its answers use padding and background images to avoid having to use the text-decoration property. I'm still looking for a solution when the content is variable width text.
If you use display: inline-block on the :after pseudo, the text-decoration declaration will work.
Tested in Chrome 25, Firefox 19
IE8's implementation of the :before and :after pseudo-elements is incorrect. Firefox, Chrome and Safari all implement it according to the CSS 2.1 specification.
5.12.3 The :before and :after pseudo-elements
The ':before' and ':after'
pseudo-elements can be used to insert
generated content before or after an
element's content. They are explained
in the section on generated text.
...
Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification
The specification indicates that the content should be inserted before or after the element's content, not the element (i.e. <element>content:before content content:after</element>). Thus in Firefox and Chrome the text-decoration you're encountering is not on the inserted content but rather on the parent anchor element that contains the inserted content.
I think your options are going to be using the background-image/padding technique suggested in your previous question or possibly wrapping your anchor elements in span elements and applying the pseudo-elements to the span elements instead.
I had the same problem and my solution was to set height and overflow:hidden
http://jsfiddle.net/r45L7/
a {
text-decoration: underline;
}
a:after {
content: "»";
display: inline-block;
text-decoration: none;
height:16px;
overflow: hidden;
padding-left: 10px;
}
It works on IE, FF, Chrome.
As an alternative, you can use a bottom border rather than a text-decoration.
This assumes that you know the color of the background
a {
text-decoration: none;
border-bottom: 1px solid blue;
}
a:after {
content: "foo";
border-bottom: 1px solid white; /* same color as the background */
}
1)
:after{
position: absolute;
}
is not perfect, because element content will not wrap
2)
:after{
display: inline-block;
}
is not perfect, because sometimes we wish after content should always wrap with last word of element content.
For now, I could not find find a perfect solution fits all 3 conditions(1. content could auto-wrap if it's too long 2.after content should wrap with element content, which means after content should not occupy single by it self. 3.text-decoration should only apply on element condition not apply to after content.)
I thoughts for now is using other way to mimic text-decoration.
What I do is I add a span inside the a element, like this :
<span>link text</span>
Then in your CSS file :
a::after{
content:" <" attr(href) "> ";
color: #000000;
}
a {
text-decoration:none;
}
a span {
text-decoration: underline;
}
The only thing that worked for me was declaring a separate repeated selector with the same text-decoration property that it was inheriting from its parent, then in the main selector, setting text-decoration to none.
IE apparently does not know what to do when you set text-decoration: none on a pseudo element without that element having the text-decoration property declared (which by default, it has nothing declared by default). This makes little sense because it is obviously being inherited from the parent, but alas, now we have modern browsers.
span.my-text {
color: black;
font-size: 12px;
text-decoration: underline;
}
span.my-text:after {
text-decoration: underline; // Have to set text-decoration here so IE knows it can be overwritten below
}
span.my-text:after {
color: red;
text-decoration: none; // In the same repeated selector, we can now overwrite text-decoration in our pseudo element.
}
I realise this isn't answering the question you're asking, but is there a reason you can't use the following (background-based approach):
a.file_pdf {
background-image: url(images/pdf.png);
background-position: center right;
background-repeat: no-repeat;
padding-right: 15px; /* or whatever size your .png image is plus a small margin */
}
As far as I know, the Firefox implementation of :after observes the property of the selector's class, not the psuedo-class. It might be worth experimenting with different doctypes, though? The transitional, rather than strict, sometimes allows for different results (albeit not always better results...).
Edit:
It appears that using
a:after {
content: " <" attr(href) ">";
text-decoration: none;
color: #000000;
background-color: #fff; /* or whatever colour you prefer */
}
overrides, or at least hides, the text-decoration. This doesn't really provide any kind of answer, but at least offers a workaround of sorts.
You can autoselect links to pdf-files by:
a[href$=".pdf"]:after { content: ... }
IE less than 8 can be enabled to work properly by implementing this link in the head of the html-file:
<!--[if lt IE 8]><script src="http://ie7-js.googlecode.com/svn/version/2.0(beta3)/IE8.js" type="text/javascript"></script><![endif]-->
It works also very good in al IE versions when you use the after-before-content-thing for dosplaying quotation marks.
Position the content absolutely as follow:
a {
position: relative;
margin: 0 .5em;
font-weight: bold;
color: #c00;
}
a:before,
a:after {
position: absolute;
color: #000;
}
a:before {
content: '<';
left: -.5em;
}
a:after {
content: '>';
right: -.5em;
}
This works for me in Firefox 3.6, not tested in any other browsers though, best of luck!
Hi I was also having trouble with this as well and happened to stumble across a workaround.
To get around it, I wrapped the URL in div and used something like this.
.next_page:before {
content: '(';
}
.next_page:after {
content: ')';
}