I have some code in my WP CSS that shows a link-symbol before links on pages and articles. Here is section of the styles for styling anchors:
.entry-container .entry-content a::before {
display: inline-block;
text-rendering: auto;
-webkit-font-smoothing: antialiased;
padding-right: 4px;
font: var(--fa-font-solid);
content: "\f0c1";
}
Problem: The symbol shows before anchors too.
On one page I managed to hide them successfully using this chunk of CSS:
#mpm.wpsal-anchor::before {
display: none;
}
This works fine.
But on the other page, I have several anchors and I want to use a css code, that hides all of them without typing each anchor! I tried
[class$="wpsal-anchor::before"] {
display: none !important;
}
but without success.
Do anyone have a suggestion or solution?
Thanks in advance!
So based on your reply of not wanting the before to show on any anchor element there are a few things you can try
You can use the * in CCS to target all elements and follow it with an anchor. The CSS below says that for all elements that have an anchor tag to not display the before pseudo element. Give that a try. I would put it at the top of your CSS just in case other elements use before. You could also try it without the ( and just use a::before
* a::before { display: none; }
Related
how can i make an indent for hyperlink ?
I've tried as this code but no success.
a {
text-decoration: none;
text-indent: 20px;
}
html
If you don't want all hyperlinks to be indented, you could wrap it around a <div> with a unique id; this is an alternate solution.
HTML:
<div id="indented">
html
</div>
CSS:
a{
text-decoration:none;
}
#indented {
text-indent:20px;
}
text-indent is not avalaible for inline elements
https://www.w3.org/wiki/CSS/Properties/text-indent
a {
text-decoration: none;
text-indent: 20px;/* not avalaible for inline elements */
display: inline-block;
}
html
padding could help
a {
text-decoration: none;
text-indent: 20px;/* not avalaible for inline elements */
padding-left:20px;;
}
html
Put this into a CSS file and link it to your HTML file using the link tag:
a {
text-decoration:none;
text-indent:20px;
}
My strong suggestion is go with the CSS file, it's a lot cleaner and allows you to target more elements, not just that specific anchor tag
text-indent is for block or inline-block elements. So you can assign display: inline-block; or display: block; to the a tag and get the desired effect. Here's a demo http://codepen.io/anon/pen/WRvOQd
how can i configure the Ckeditor to add automatic a <span> tag in a new <li></li> element.
Like so <li><span></span></li>
Thanks for helping
As an alternative route to style the UL bullet points differently from the text within them, there is a CSS hack using :before you can use - it's not pretty though! See fiddle by BoltClock here: http://jsfiddle.net/BoltClock/q9RRg/
The relevant CSS code is this:
ul li {
color: black;
list-style-type: none;
margin-left: 1em;
}
ul li:before {
content: '\2022 ';
color: red;
padding-right: 0.5em;
}
If this is not usable, the secondary option would be to post-process your data. During your saving phase, simply add the spans to any LI element where the first child is not yet a span. I do recommend adding a class to the spans for future usage and easy targeting as well.
I am using Twitter bootstrap and CSS to style a dropdown. I have a child element that floats on the left and then text that flows to the right of it. Unfortunately the text does not flow within the containing box and spills over.
I' not sure if this is a Twitter bootstrap issue or just a CSS issue (ultimately a CSS isseu I know but worth tagging this as Twitter Bootstrap too since I'm using that framework).
I've tried several combinations, and obviously not the right combination to achieve the behavior I'm after. Does anyone know how to fix this? A working example of the problem is here:
http://ec2-54-215-108-9.us-west-1.compute.amazonaws.com/
(click on the International Gymnast link on the right)
Here is a screenshot demonstrating the issue as well.
Thanks,
Karl..
Its because links in dropdowns in TWBS have white-space: nowrap;.
The easiest solution i could think of is creating a custom CSS class:
.dropdown-menu > li > a.btn-wrap {
white-space: normal;
}
And then adding class="btn-wrap" to your <a> element
.dropdown-menu > li > a ,
.btn.btn-default.btn-large.btn-left > span {
white-space: normal;
}
I would also reduce the line-height on the a tag.
Reduce the height on [.live-mon]
Remove the height on the a tag.
Increase the padding top and bottom on the a tag.
.intl-link li a {
overflow: hidden;
}
.intl-link li a {
line-height: 19px;
}
.dropdown-menu.intl-link > li > a {
padding: 7px 20px;
}
.live-mon {
display: block;
height: 62px;
width: 92px;
}
You would get something like this:
I want to add pagination to one of my websites, but I have multiple problems with it, probably due to the fact that I don't have the best CSS skills in the world (they're mediocre at best).
You can see an SSCCE of my problem here: http://jsfiddle.net/rmurzea/qE7Ku/3/
1). To make the margin-bottom rule work, I had to add it to the pagination a class. If I add it directly to the pagination class, it doesn't work. Why ?
2). The content a:hover property has a text-decoration: underline rule. I can't seem to override it in pagination a:hover. How can I do it ?
3). I want that block of color and its text on the next line, but specifying a display: block rule doesn't seem to work.
Can anyone please help me with these problems ? Thank you in advance.
1) it works
.pagination {
margin-bottom: 20px;
}
2) Use !important in your css
.pagination a:hover {
text-decoration: none !important;
background-color: #5D4137;
color: #FFFFFF;
}
3) Replacing your p tag by div should work but it didn't, however I used a div with clear: both and it worked..
Here is your jsfiddle updated
On hover, my text links have underlines. This is the default in Bootstrap.
I want to keep this, unless the link is within a certain div.
The code I have tried (and several variations) doesn't work.
The HTML:
<div class="wall-entry span5">
<a href="">
<img src="http://www.placehold.it/290x163" />
<div class="wall-address">
<p>Burgundy Street</p>
<p>New Orleans, LA</p>
<p>USA</p>
</div>
</a>
</div>
My CSS:
.wall-entry {
background-color: #black;
position: relative;
img {
opacity:0.4;
filter:alpha(opacity=40); /* For IE8 and earlier */
}
div {
position: absolute;
left: 10px;
bottom: 10px;
p {
line-height: 18px;
margin: 0;
font-family: Neuzit Heavy;
font-size: 18px;
color: white;
text-decoration: none;
}
}
}
div.wall-entry:hover img {
opacity:1;
filter:alpha(opacity=100); /* For IE8 and earlier */
}
a div.wall-entry {text-decoration: none;}
A quick note: I have tested a {text-decoration: none;}, this does work. However, I don't want to change everything. Just the links in this specific case.
put the font-family in quotes for fonts that involve multiple words, first of all:
font-family: "Neuzit Heavy", sans-serif;
then beneath a put .wall-entry a:hover { text-decoration: none; }
You have the order switched around. The item you're targeting should be to the right. For example,
.wrapper .header a in english means "Target all anchor links that are inside of .header, that are inside of .wrapper"
The problem is actually a caused by Twitter Bootstrap's CSS file, not your code.
Twitter Bootstrap's CSS file (bootstrap.min.css was the culprit on my project) gives links underlines multiple times. It gives them an underline when they're hovered over, when they're focused on, and it even makes them blue.
In my project, I specifically assigned my own colors to the text that was inside anchor tags, and the browser rendered their colors correctly, just as I assigned them, however, since the text was wrapped in an anchor tag, the blue underline from the Twitter Bootstrap stylesheet still appeared below all my styled text.
My solution: open bootstrap.min.css (or whatever your Bootstrap stylesheet is called) and search for the term 'underline', and whenever you find 'text-decoration: underline' inside an anchor tag selector, like this:
a:hover, a:focus {
color: #2a6496;
text-decoration: underline;
}
or this:
a, a:visited {
text-decoration: underline;
}
you should go ahead and remove the color and text-decoration rules.
That solved my problem.
This won't work
a div.wall-entry {text-decoration: none;} // Inside 'a' div with class wall-entry
but this will work.
div.wall-entry a{text-decoration: none;} // Inside div with class wall-entry 'a'
because an a tag has text-decoration.
If your link is inside div tags, then you can select your link this way:
div > a:hover {
text-decoration:none;
}
It works fine, even with boostrap used.