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;
}
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
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
I'm running into a bug in Microsoft Edge where <a> tags are unclickable. I've managed to distill it to the simplest example here:
a {
visibility: hidden;
display: inline-block;
}
a::after {
visibility: visible;
content: "more";
}
<span>
go!
</span>
If anyone has any ideas, I'd really appreciate it. Thanks!
Disclaimer: I'm using IE11 here, but it has the same problem you describe for Edge, so I hope this solution will work there too.
It's a bit of a hack though; if better solutions come up, I'll gladly delete this one.
a {
display: inline-block;
overflow:visible;
color:white; /* note: use current background color */
position:relative;
}
a::after {
color:black; /* note: use current foregound color */
content: "more";
position:absolute; left:0; top:0;
}
<span>
go!
</span>
I have a WordPress site in which we are replacing menu links with a background image. Here is an example of the css for one of the menu items.
#menu-item-3039{
width:30px;
height:20px;
border:none;
padding-right:0;
}
#menu-item-3039 a{
visibility:hidden;
}
#menu-item-3039 a::before{
visibility:visible;
display:block;
width:20px;
height:20px;
content:"";
background-size:20px 20px;
}
#menu-item-3039 a::before {
background-image:url("/wp-content/uploads/2015/05/moodle-icon.png");
}
Is there something very obviously wrong or missing to work with IE11?
It works just great in chrome and firefox, but does not work at all in IE11. I'm not very experienced with IE cross browser support, so it's likely that anything will help.
Thanks!
IE11 is inheriting the visibility from the a to their ::before.
I'd recomend you not to use that rule and use:
overflow: hidden;
text-indent: -1000px;
height: 20px;
display: block;
instead. This way you are hidding the text (what I think that is what you really want to do) and not affecting the background.
I have a sprite, consisting of 4 bubbles that I will use for the selected version of my navigation, that looks like this:
The best example of what I'm trying to achieve that I can find is Dribbble. Look at the header navigation selected navigation. They are using a bubble similar to mine to cover the "Jobs" link, except they use pure css to achieve the look, whereas I'm using images.
Here's my code:
.inline-block{
/* Inline block class for li navigation */
display:-moz-inline-stack;
display:inline-block;
zoom:1;
*display:inline;
}
#header li a{
width:40px; /* without padding = 110px*/
height:15px; /* without padding = 31px*/
padding:8px 35px;
}
#header li a.selected{
background: url('../img/btn-header-sprite.png') 0 -1px;
display:inline-block;
}
#header li a{
color:#FFF;
font-weight:bold;
font-size:15px;
}
#header li:hover{
background-position:0 -34px;
}
#header li:active{
background-position:0 -67px;
}
Right now it looks like this:
I'm having to individually align the padding for each one, and as you can see, if the padding is not correct, the text is not centered in the bubble. Is there a better way to format this, than individually giving padding to each bubble?
Thanks for all help! If you need more clarification, just say!
You can try
display:table-cell;
vertical-align: middle;