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
Related
Ok, first off I want you all to know that I have tried using the <span></span> tag (though maybe incorrectly).
Is there something I'm doing wrong with the <span></span> tag? Or is there something I need to do differently altogether?
Here is my current code to create a space without <br></br>:
#beforeImage span {
padding: 40px;
}
<span id="beforeImage">text</span>
2 things to fix:
you were applying the CSS to span of an ID selector, but you were using a span with an ID selector in your HTML.
span won't have padding because it is an inline element by default, so set inline-block or block
Snippet
#beforeImage {
padding: 40px;
display: inline-block; /* or block */
/* demo */
background: red
}
<span id="beforeImage">Foo bar</span>
<span> is by default an inline element and will not be sized nor accept vertical padding without resetting its display to inline-block ( or else but inline).
You might look for:
span{
display:inline-block;
padding: 40px;
}
beside, br could still be used
br {
line-height:3em;
vertical-align:top;/* debug FF/IE */
}
http://codepen.io/anon/pen/GoVdYY
But, do you really need an extra tag, could you not apply a bottom margin or padding to another element ?
Can simply target the Id of the span:
#beforeImage{
display:inline-block;
padding: 40px;
}
Or all spans:
span{
display:inline-block;
padding: 40px;
}
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.
Here is the simple html
<p> some text here </p>
more
and the css I tried
p+a{
color: #f00;
display: inline-block;
/* also tried float: left; */
}
To bring up the output as this
some text here more
I want more in the line of p.
p is a block level element. So you couldn't inline to a. Therefore you need to style your p as display: inline; or display: inline-block; and then give display: inline; or display: inline-block; to a
here is the fiddle.
You need to give the paragraph display: inline-block; as well, because it is a block-level element. Therefor it automatically takes the available space and pushes the anchor to a new line. Also you'll need to add the closing " to your href-attribute.
(If you're able to manipulate the markup of the paragraph – just add the anchor inside of it.)
HMTL:
<p>some text here</p>
more
CSS:
p {
display: inline-block;
}
p + a {
color: #f00;
display: inline-block;
}
Note: Please use classes to style things like that instead of elements. Add a class to your anchor and select it with p + .read-more or something like that.
just add the below css to your stylesheet.
p{ dislpay:inline-block;}
P is a block level element make it inline-block so next inline element come up next to p tag.
use this code
CSS:
p > a {
color: #f00;
display: inline-block;
font-size: 18px;
}
HTML:
<p>some text here more</p>
I would like to create links that have icons included in the link.
For example, take a modified version of the chat/meta/faq links from Stack Overflow.
Here is one attempt.
HTML
<div id='clickable'>
<a href="#chat">
<div class='so-icon'></div>
chat
</a>
...
</div>
CSS
#clickable div {
display:inline-block;
vertical-align: middle;
}
.so-icon {
background-image:url(http://www.madhur.co.in/images/icon_stackoverflow3.png);
width: 30px;
height: 30px;
}
a {
text-decoration: none;
margin-right: 10px;
}
a:hover {
text-decoration: underline;
}
The one problem with this design is that the underline (hover over the link to see) appears on more than just the link text, but also on some whitespace before that.
A couple of solutions I can think of are:
Having two separate <a> elements, one for the icon, and one for the text. Violates DRY.
Not using a elements at all, but rather javascript, to implement the link functionality, while styling both the icon and text/span elements separately.
Isn't this something that should be possible to accomplish using CSS only, and not having to recourse to javascript?
Here we go, a solution with no additional markup or pseudo-elements, based on #sandeep's.
http://jsfiddle.net/z4Gs2/2/
like this??
http://jsfiddle.net/HBawG/
a p:hover {
text-decoration: underline;
}
I tried to edit your work
Hope i helped.
You can apply the background image directly to the tag. Something like this:
chat
meta
faq
with the CSS:
.so-icon {
background:url(http://www.madhur.co.in/images/icon_stackoverflow3.png) no-repeat left center;
width: 30px;
height: 30px;
}
a {
display: inline-block;
text-decoration: none;
padding-left: 35px;
margin:10px;
line-height: 30px;
}
a:hover {
text-decoration: underline;
}
You should remove the carriage return between your div (image) and your hyperlink text (to avoid undesired blank spaces)
Then you should modify the css of .so-icon class adding margin-right: 5px (for example)
You can find the modified version of your example here
http://jsfiddle.net/q2vE4/4/
I have a set of styled links using the :before to apply an arrow.
It looks good in all browser, but when I apply the underline to the link, I don't want to have underline on the :before part (the arrow).
See jsfiddle for example: http://jsfiddle.net/r42e5/1/
Is it possible to remove this? The test-style I sat with #test p a:hover:before does get applied (according to Firebug), but the underline is still there.
Any way to avoid this?
#test {
color: #B2B2B2;
}
#test p a {
color: #B2B2B2;
text-decoration: none;
}
#test p a:hover {
text-decoration: underline;
}
#test p a:before {
color: #B2B2B2;
content: "► ";
text-decoration: none;
}
#test p a:hover:before {
text-decoration: none;
}
<div id="test">
<p>A link</p>
<p>Another link</p>
</div>
Is it possible to remove this?
Yes, if you change the display style of the inline element from display:inline (the default) to display:inline-block:
#test p a:before {
color: #B2B2B2;
content: "► ";
display:inline-block;
}
This is because the CSS specs say:
When specified on or propagated to an inline element, it affects all the boxes generated by that element, and is further propagated to any in-flow block-level boxes that split the inline (see section 9.2.1.1). […] For all other elements it is propagated to any in-flow children. Note that text decorations are not propagated to floating and absolutely positioned descendants, nor to the contents of atomic inline-level descendants such as inline blocks and inline tables.
(Emphasis mine.)
Demo: http://jsfiddle.net/r42e5/10/
Thanks to #Oriol for providing the workaround that prompted me to check the specs and see that the workaround is legal.
There is a Bug in IE8-11, so using display:inline-block; alone won't work there.
I've found a solution for this bug, by explicitly setting text-decoration:underline; for the :before-content and then overwrite this rule again with text-decoration:none;
a {text-decoration:none;}
a:hover {text-decoration:underline;}
a:before {content:'>\a0'; text-decoration:underline; display:inline-block;}
a:before,
a:hover:before {text-decoration:none;}
Working example here:
http://jsfiddle.net/95C2M/
Update:
Since jsfiddle does not work with IE8 anymore, just paste this simple demo-code in a local html file and open it in IE8:
<!DOCTYPE html>
<html>
<head>
<title>demo</title>
<style type="text/css">
a {text-decoration:none;}
a:hover {text-decoration:underline;}
a:before {content:'>\a0'; text-decoration:underline; display:inline-block;}
a:before,
a:hover:before {text-decoration:none;}
</style>
</head>
<body>
Testlink With no Underline on hover under before-content
</body>
</html>
You can do it adding the following to the :before element:
display: inline-block;
white-space: pre-wrap;
With display: inline-block the underline disappears. But then the problem is that the space after the triangle collapses and is not shown. To fix it, you can use white-space: pre-wrap or white-space: pre.
Demo: http://jsfiddle.net/r42e5/9/
Wrap your links in spans and add the text-decoration to the span on the a:hover like this,
a:hover span {
text-decoration:underline;
}
I have updated your fiddle to what I think you are trying to do. http://jsfiddle.net/r42e5/4/
try using instead:
#test p:before {
color: #B2B2B2;
content: "► ";
text-decoration: none;
}
will that do?
use this
#test p:before {
color: #B2B2B2;
content: "► ";
}