My HTML
<div id="ctl00_cphBreadCrumb_TDDF5635D005_ctl00_ctl00_Breadcrumb" class="RadSiteMap RadSiteMap_Sitefinity">
<li class="rsmItem sfBreadcrumbNavigation">
<a class="rsmLink" href="default">Default</a>
<span class="arrow"> ></span>
</li>
<li class="rsmItem sfNoBreadcrumbNavigation">
<span style="color: #999;font-family: myriadpro-bold-webfont;font-size: 10px;">Services</span>
</li>
</ul>
</div>
CSS:
.rsmLink {
position: relative;
text-decoration: none !important;
color: #044470 !important;
border-bottom: 1px solid #044470 !important;
font-family: myriadpro-bold-webfont !important;
font-size: 10px !important;
padding: 0 !important;
letter-spacing: 1px;
}
But I am getting some space between link and border. If I use underline instead of border it is not that much below as expected. I want space between what border is giving and what underline is giving. And border should be little less in size than it is. Could you please help me?
Fiddle
Thanks.
It's much of a muchness between text-decoration and border-bottom, but you could try using a pseudo element like this:
.rsmLink:before
{
content: '';
position:absolute;
bottom:0;
width: 100%;
height: 1px;
background: #044470;
}
FIDDLE
If that's not exactly what you need, you could play with the bottom rule ... say bottom:-1px .
The results looks similar to border-bottom but hey, i'll let you do the squinting.
Just Added line-height: 11px; and its done. Thanks for your time dears.
Related
How do I get rid of the underline for the image inside the link in SCSS. Could anyone please help?
I created a working example using CodeSandbox
HTML
<p>
<a href="#">
Link
<span>
<img src="imagePath" alt="logo" />
</span>
</a>
</p>
SCSS
a {
text-decoration: none;
&:hover{
border-bottom: 1px solid red
}
}
As yiu can't alter the HTML, this snippet puts the underline on a pseudo element rather than on the actual element. The pseudo element is made to have the same width as the text ('Link') by using that as its content - which is slighly nasty as it means if the text of the Link changes the CSS/SCSS will also have to change.
a {
text-decoration: none;
position: relative;
}
a:hover::before {
content: 'Link';
position: absolute;
top: 0;
left: 0;
width: auto;
height: 100%;
border-bottom: 1px solid red;
z-index: 1;
}
<p>
<a href="#">
Link
<span>
<img src="imagePath" alt="logo" />
</span>
</a>
</p>
Try to put background color on span border-bottom:
body {
font-family: sans-serif;
}
a {
text-decoration: none;
border-bottom: 1px solid transparent;
}
a:hover{
border-bottom: 1px solid red;
}
a:hover span {
border-bottom: 1px solid white;
}
<div id="app">
<p>
<a href="#">
Link
<span>
<img
width="10"
src="https://bitsrc.imgix.net/3b69976526d31a20a1fd238f5a32a704cf437dd6.png"
alt="logo"
/>
</span>
</a>
</p>
</div>
We'll thats tricky and also not the best practices when it comes to frontend buuutt
Since you know the size of the image, you can add a fake border-bottom with the pseudo:after element with width 100% - [width-of-the-element]:
a {
text-decoration: none;
position:relative;
&:before{ // we initialize it before showing to avoid creating elements on interaction
position:absolute;
content:'';
left:0;
bottom:-2px;
border-bottom:1px solid red;
width:calc(100% - 10px - 0.2em); // the image is 10px and the space bar is ~0.2em
display:block;
opacity:0; // just some nice transitioning
transition:all .5s ease;
}
&:hover{
//border-bottom: 1px solid red;
&:before{
opacity:1;
}
}
}
<p>
<a href="#">
Link
<span>
<img
width="10" src="https://bitsrc.imgix.net/3b69976526d31a20a1fd238f5a32a704cf437dd6.png" alt="logo"
/>
</span>
</a>
</p>
Check here a working sample
There's a few different ways to do it but here's one that doesn't change your HTML flow. Since the image is inside the <a> and the border is being applied to the <a>, you can move the img outside the bounds of the <a> with positioning so it doesn't affect the width of the element and thus the border.
a
{
text-decoration: none;
position: relative;
&:hover{
border-bottom: 1px solid red;
}
img
{
position: absolute;
left: 100%;
padding-left: 5px;
padding-top: 3px;
}
}
The left is to push it to the outside of the element on the right side, and the padding-left and padding-top are to put it in roughly the same position it was in your sandbox.
Updated sandbox
An alternative would be to wrap the text inside the <a> in their own element, like a span, and then apply the border just to the span.
I would recommend wrapping your anchor text inside the span and using CSS to underline that. One thing to keep in mind is that border is going to add to the elements height and will cause a "jumping" effect when you add/remove the border. I would go about making sure a border is always present, but "hidden" when it's being hovered over. You can do this by either using "transparent" as a color or match the color with the background hex value.
https://codesandbox.io/s/cocky-rgb-6he0j
<p>
<a href="#">
<span>Link</span>
<img src="imagePath" alt="logo" />
</a>
</p>
body {
font-family: sans-serif;
}
a {
position: relative;
&, &:hover, span {
text-decoration: none;
}
span {
border-bottom: 1px solid transparent;
}
img {
position: absolute;
left: 100%;
padding-left: 5px;
padding-top: 3px;
}
&:hover span {
border-bottom-color: red;
}
}
EDIT: updated code formatting and added missing body styles
I've this html code:
<a class="jstree-anchor jstree-disabled textualstatements-jstreenode-parent" href="#" tabindex="-1" id="td72383_anchor"><i class="jstree-icon jstree-themeicon fa fa-folder jstree-themeicon-custom" role="presentation"></i>My example text</a>
And this CSS:
.textualstatements-jstreenode-parent {
text-decoration: underline !important;
text-decoration-color: #2eaaa1 !important;
text-decoration-thickness: 2.5px !important;
text-underline-offset: 2px !important;
font-weight: bold;
width: 100%;
}
And this is rendered like:
However, I want the green line to be expanded using the full width from the block, can this be done using text-decoration?
Instead of underline, create bottom border,
border-bottom:1px solid #000;
Use border.
p{
border-bottom: 2px solid black;
}
Put it in a div and set the bottom-line to green.
div {width: 100%; border-bottom: 1px solid #2eaaa1;}
Or if you perse want to underline, you can expand the a text with spaces: a lot of & nbsp;.
This solution works for me.
Here is an explanation already on stackoverflow CSS Styling text areas like notebook-look
.textualstatements-jstreenode-parent {
font-weight: bold;
width: 100%;
border-bottom: solid #2eaaa1 2.5px;
display: inline-block;
}
<a class="jstree-anchor jstree-disabled textualstatements-jstreenode-parent" href="#" tabindex="-1" id="td72383_anchor"><i class="jstree-icon jstree-themeicon fa fa-folder jstree-themeicon-custom" role="presentation"></i>My example text</a>
You are trying to make width 100% for an anchor tag which is an inline element.
width:100% will not have any effect unless the element is block or inline-block.
Try this
.textualstatements-jstreenode-parent {
text-decoration: underline !important;
text-decoration-color: #2eaaa1 !important;
text-decoration-thickness: 2.5px !important;
text-underline-offset: 2px !important;
font-weight: bold;
width: 100%;
display: block;
}
Hi there a rather silly question I would like to angle my div 45 degr without the content rotating as can be seen the blue is an image which has the correct angle. but the div does not and because of this the on over color change looks wrong as it is not angled. i have tried a few example but content always gets angled as well.
how could i achieve this? thanks in advance for any suggestions.
HTML:
<div class="topnav" id="myTopnav">
Home
News
Contact
About
☰
</div>
CSS:
.topnav a {
float: left;
display: block;
color: black;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
transform: skewY(-45deg);
}
Here you go. The size of the triangle is determined by the border settings. Just insert this element after the a.about in your code.
#triangle {
width: 0;
height: 0;
border-top: 100px solid red;
border-right: 100px solid transparent;
}
<div id="triangle"></div>
here's the settings for each direction:
top-left: border-top and border-right
top-right: border-top and border-left
bottom-left: border-bottom and border-right
bottom-right: border-bottom and border-left
I tried to make an under-line dotted under word to mark it as user provided information.
It is fine to use a pre-defined html under-line tag <u>..</u> with styling dotted or style border-bottom. However, it is a little bit problem with printing (the dotted not showing correctly); Therefore I decided to use dotted symbols ... instead because it is showing correct and precise.
By that way, I tried to make the word takes place of dotted points' spaces, and dotted point would stay a little bit lower from it current position under the word.
To make it clear, it would look like this:
My HTML Code do to this is like so:
.dotted:before{
content: '..................';
position: absolute;
top: 20px;
}
<p>Name: <span class="dotted">Jonh David</span></p>
However, as the information provided by user is varied, I cannot determined how many dotted points I would need to fit those information correctly.
Your tip is very much appreciated. Thanks.
Can use border-bottom-style css property
.dotted {
border-bottom: 1px solid #000;
border-bottom-style: dotted;
}
https://jsfiddle.net/j965444n/
I found this really cool site for doing this. Refer the site below.
Styling Underlines
You can play around with the properties and get the desired thickness and padding, also this is not dependent on setting the width based on the content size!
Check my below example of how this is done!
.dotted {
background-image: linear-gradient(to right, #000000 50%, transparent 50%);
background-position: 0px 100%;
background-repeat: repeat-x;
background-size: 4px 2px;
padding: 0px 3px;
}
<p>Name: <span class="dotted">Jonh David</span></p>
I think it's something like this:
#myDIV {
text-decoration: underline;
text-decoration-style:dotted;}
w3schools underline
Note: The text-decoration-style is only supported by Firefox.
If a simple dotted border isn't good enough for you and say you want to control the spacing between the dots - you could make your technique work by setting overflow:hidden on the parent element.
.dotted {
position: relative;
overflow: hidden;
display: inline-block;
vertical-align: bottom;
}
.dotted:before {
content: '...............................';
position: absolute;
top: 4px;
width: 100%;
letter-spacing: 2px; /* adjust to control spacing between dots */
}
<p>Name: <span class="dotted">Jonh David</span></p>
<p>Name: <span class="dotted">Jo</span></p>
<p>Name: <span class="dotted">Jonh David blabla</span></p>
I wonder what is the problem with underline or you could try border-bottom: 1px dotted #444 but whatever, here's your method - a span with dotted :pseudo - which takes into account the length of the element.
content is a lot of … (use dots if you wish)
it's cropped with overflow: hidden
test cases with 2 very different lengths
3rd example is good ole dotted border (works since IE7)
.dotted {
position: relative;
}
.dotted:before{
content: '…………………………………………………………………………………………';
display: block;
position: absolute;
top: 3px;
left: 0; right: 0;
overflow: hidden;
}
.other-dots {
border-bottom: 1px dotted black;
}
<p>Name: <span class="dotted">Jonh David</span></p>
<p>Name: <span class="dotted">Maria-Magdalena von Stroheim de la Peña</span></p>
<p>Name: <span class="other-dots">Other way with bd-bottom</span></p>
I think #Christopher Marshall's idea is gonna make the same effect on printed page, so here is an example with background : https://codepen.io/Pauloscorps/pen/YrwWYo
HTML
<p>My name is : <span>John David</span></p>
CSS :
p {
span {
display:inline-block;
font-weight:bold;
&:after {
content:"";
display:block;
width:100%;
height:1px;
background:red url('https://img11.hostingpics.net/pics/194508dot.jpg') repeat center bottom;;
}
}
}
My link has a background color. I need it to be centred but for its background to not take up the full width. I also cant set a fixed width for the link, as the text is provided by a CMS and will var. Cant this be solved without adding additional HTML?
http://jsfiddle.net/jx3e4/2/
<a class="green-button" href="#">Download</a>
<a class="green-button two" href="#">Download</a>
.green-button {
background: none repeat scroll 0 0 blue;
border-bottom: 1px solid red;
color: #FFFFFF;
}
.two {
margin: auto;
display: block;
}
EDIT - Sorry, I didnt mention, but there is also text within the same parent div that needs to keep its default text align of left.
http://jsfiddle.net/jx3e4/7/
Give the parent div text-align:center and the green button - display:inline-block
UPDATED FIDDLE
Try this..........
HTML
<div class="links">
<a class="green-button" href="#">Download</a>
<br />
<br />
<a class="green-button two" href="#">Download</a>
</div>
CSS
.green-button {
background: none repeat 0 0 blue;
border-bottom: 1px solid red;
color: #FFFFFF;
text-align:center;
margin:auto;
padding: 6px 12px 6px 12px;
}
.links {
width:100%;
display:block;
text-align:center;
}
jsFiddle