How do I create distance between the text and the border below the text as shown in the image attached using sass/css?
I want the distance to be 5px and the font-size of the text to be 15px.
I tried doing
.selected {
color: #284660;
}
.selected:after {
content: '';
position: absolute;
width: 100%;
height: 0;
left: 0;
bottom: 5px;
border-bottom: 2px solid #284660;
}
but that created a border that was too wide.
I feel couple of things which can be improved in the above snippet.
You may not need psuedo element for desired effect
You should not use absolute positioning for that , in case you want to use psuedo element
In any case you can try this out.
&.selected {
color: #284660;
border-bottom: 2px solid #284660;
padding-bottom:10px ; // this should give you some spacing.
}
Try a negative
{
bottom: -5px;
}
Besides the complete lack of knowledge of your DOM profile or what element the & refers to, if you just slap a border and padding on an inline element, you'll have the effect you want.
No need to play with pseudoelements.
<span style="padding-bottom:5px; border-bottom:2px solid black;">Some Text</span>
Obviously, you should put that styling info in the css file, I merely inlined it for the example.
Oh and next time, please include sample HTML with your sample CSS. Only reason I even bothered was because the solution was as simple as "What is padding for 15, Trebek?"
Related
I have a very simple setup, whereby I add a 2px high 'line' under all my A href's, in an :after psuedo element.
The problem is that I want that line to be under each line of text within the a html tag, not just the bottom of the a.
Is there a way to make the :after appear under each line of text, rather than the text block as a whole?
I am not using text-decoration: underline; is because I want to control the look/styling of the underline and also then animate it on hover.
HTML:
Some text here that will wrap onto 2 lines because it is quite long
CSS:
a:after {
content: "";
position: absolute;
width: 100%;
height: 2px;
bottom: 0;
left: 0;
background-color: currentColor;
-webkit-transform: scaleX(1);
transform: scaleX(1);
}
I want the :after line to appear under BOTH lines of text, when it wraps (so appears like a common a link underline), but current it only shows under the A block as a whole...
I want:
Some text that will wrap onto 2 lines
_____________________________________
because it is quite long.
_________________________
What I get:
Some text that will wrap onto 2 lines
because it is quite long.
_____________
ok, probably not the most elegant solution, but you can try with a gradient Background:
.gradientLink{
line-height: 50px;
text-decoration: none;
color: #212121;
padding: 14px 0;
background: linear-gradient(0deg, red 1px, white 1px);
}
https://codepen.io/giannidk/pen/MZGPNX
Try this css code please.
a::after{
max-width: 50%;
border-bottom: 1px solid black;
content: '';
display: block;
}
It will set border after every a tag ,u can manually adjust the border width by changing max-width size.
Why don't you use border instead ?
a{
padding-bottom: 10px;
border-bottom: 1px solid grey;
text-decoration: none;
}
I am afraid you cannot do that with pure CSS. The only solution coming to my mind at this point is to add elements/lines to the dom using javascript:
I would advice subscribing to the 'resize' event on the window and to change the amount of your needed underlines according to the number of lines your a tag takes up.
I've a trapezoid shapes in CSS, but the problem is that I also need the same kind of trapezoid turning the borders opposite, the first trapezoid css is something like this:
#trapezoid1 {
height: 0;
width: 350px;
border-bottom: 190px solid rgb(2, 145, 178);
border-left: 45px solid transparent;
border-right: 45px solid transparent;
padding: 0 8px 0 0;
display:block;
position:relative;
}
But I also need the second trapezoid turning the border-bottom to border-top, however in that case, the text is being flew away from the actual trapezoid.
I did border-top instead of border-bottom to turn the trapezoid opposite.
Here's the full display of the problem.. jsfiddle
Your best option is to use pseudo elements so you dont have to use absolute positioning on the text element.
Using both :before and :after will help create the desired shape. The borders are also transparent so you don't have to worry about background images being coloured over.
#trapezoid {
width: 260px;
height: 190px;
background: red;
margin-left: 45px;
position: relative;
}
#trapezoid:before {
content: '';
border-right: 45px solid red;
border-bottom: 190px solid transparent;
position: absolute;
left: -45px;
top: 0;
}
#trapezoid:after {
content: '';
border-left: 45px solid red;
border-bottom: 190px solid transparent;
position: absolute;
right: -45px;
top: 0;
}
<div id="trapezoid">
Text in here
</div>
You can also refer to one of my previews answers which give a good overview at all of the different possible ways of creating a CSS trapezoid.
Responsive CSS Trapezoid Shape
How about this:
HTML (add span tags around trap2 text)
<div id="trapezoid1">
Designing Something
</div>
<br/>
<div id="trapezoid2">
<span id="trap2-text">Designing Opposite</span><!-- NEW -->
<!-- I need the text in proper place which currently isn't -->
</div>
CSS (add one rule)
#trap2-text {
position: absolute;
top: -190px;
left: -25px;
}
DEMO
I generally like pure css shapes, but I thought SVG might make your life easier in this case so I started fiddling around with your fiddle. I'm not completely satisfied with the results but it gives some advantage like dynamic size.
Fiddle with comments: http://jsfiddle.net/bo5k36pa/8/
If you want to use this solution I highly recommend to encode your inline svgs in base64 to avoid compability and encoding problems. See this answer for details.
Explanation
The idea was to use an inline svg as background image, so it will stretch to containers of any size.
background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 4 2" preserveAspectRatio="none"><path style="fill: rgb(2, 145, 178);" d="M 0.5 0 L 3.5 0 L 4 2 L 0 2 Z" /></svg>');
background-size: 100%;
The path that makes up the trapez could be modified, if different angles or shapes are required, it could even be generated dynamically using javascript. But the real bummer here is, we can't style inline svg background images. Meaning for example to change just the fill color we have to define the entire svg markup again.
Possible solutions to avoid multiple inline svgs
Use <use>. You can define <symbols> in an external svg file and reference them in an inline <svg> via their id attributes. And we can still style those symbols using CSS. However, it would require a fair amount of extra markup in every container. Something like this:
<svg viewBox="0 0 4 2" role="img" title="Trapez"><use xlink:href="path/to/images/shapes.svg#trapez"></use></svg>
Use CSS filters to change appearance. Example fiddle / Browser Support
Go back to CSS Shapes. I'd recommend to take advantage of :before and :after pseudo elements to keep such fancy appendages a bit separate from your content box.
I have a page where I want the border to home more than one line.
h2.bord
{
border-style:inset;
border-width:8px;
border-color:green;
background-color:black;
color:white;
text-align:center;
}
This (when used) displays a border around the text.
However,
I want to home more than I one line in this border.
Help?
use a div with border and inside that place this h2 bord
Is border-style:double; what you are looking for?
Alternatively, if you wanted more than a double border's, or borders of multiple styles you could use multiple nested divs, e.g.
<style>
.inset-border { border: 4px inset Black; }
.double-border { border: 4px double Black; }
</style>
<div class="inset-border">
<div class="double-border">
<h2>content</h2>
</div>
</div>
Standard CSS borders only support at the very most a double line (see #Jaimal's answer).
If you need more than that, you need to try the following:
Additional markup: ie more container elements, each with their own border.
Use :before and :after and give them a border. Done right, they should wrap around the original box and give you extra borders. Won't work in IE6 or IE7.
Use the outline property in addition to the border. Outline works very similarly to border, but does have some slight differences. It can give you a third border box though, if used in addition to border-style:double;. Note that it might not work in older browsers.
CSS3 border-image. Using this, you can define your own graphics for the border, which means you can define as many lines as you like. Note: this definitely won't work in older browsers; it's only a fairly recent addition to CSS.
Use background-image to fake it. If you know the size of your box, this might be the simplest and most cross-browser compatible way to do it. Not so useful if you don't know the size of the box in advance though.
Hope that helps.
I'm assuming you're trying to achieve an 3d/'raised' type of border; if that's so, then you could simply use the border-style: groove: JS Fiddle demo.
However, if you're able, you could use the ::after pseudo-element, and an outset border-style:
h2.bord {
border-style:inset;
border-width:8px;
border-color:green;
background-color:black;
color:white;
text-align:center;
position: relative; /* in order to position the pseudo element relative to the parent */
margin: 8px; /* to move the edges of the element from the container element in order to see the borders of the pseudo-element */
}
h2.bord::after {
content: '';
position: absolute;
top: -16px;
left:-16px;
right: -16px;
bottom: -16px;
border: 8px outset green;
}
JS Fiddle demo.
I'm creating PHP, Javascript based photo-gallery from scratch
The problem is, I want to make difference between simple picture and photo-album.
So simple picture borders look like that
Is that possible to create facebook like photo-album borders (double borders, which creates multiple images effect) via css or CSS3?
P.S Don't know if it will be possible with old css standarts. I mean, CSS3 probably can do it but it will not be backward compatible. In other hand, currently my php side generates 100x100 px thumbs. I need something that will not be ruined if I will increase size of thumbs.
Thx in advance
Use a pseudo element like :before or :after, for example:
Turns out, most browsers don't like :before on images because it's not a text-containing element. You could still do this if you did it on an alternative element, like a div, and set the div's background to the original image. Or, you could try:
http://jsbin.com/otivaj/edit#html,live
Is this what you're looking for?
jsfiddle
HTML:
<div class="facebook-album"></div>
CSS:
.facebook-album, .facebook-album:before
{
background: red;
width: 100px;
height: 100px;
margin: 20px;
border: 3px solid #FFF;
box-shadow: 0 0 0 1px #999;
position: relative;
}
.facebook-album:before
{
margin: 0;
content: "";
position: absolute;
top: -7px;
left: -7px;
background: white;
z-index: -1;
}
You could just look at Facebook's source to figure it out. This will also work:
http://jsfiddle.net/g9A6a/
Yep, you can definitely do this with CSS. It looks like all your images are the same size, too, which will make this very straightforward. Simply place your <img> inside a containing element with position: relative; and an offset. Both the container and image should have a border, with padding and offsets you so desire. Set the width and height of the containing element based off the child image's dimensions.
Here is a
DEMO on jsfiddle
I'm not sure you can achieve that effect with simply CSS2. If adding more markup is an option, I would do something like this:
<ul>
<li><img></li>
</ul>
li {
position: relative;
border: 1px solid gray;
}
img {
padding: 6px;
border: 1px solid gray;
position:absolute;
top:6px;
left: 6px;
background-color:white;
}
I have a centered div with a nested h1 inside. Is there any way to underline it with a thicker line than the html default?
This will give you control over the U tag's underline:
<style type="text/css">
u {
text-decoration: none;
border-bottom: 4px solid black;
}
</style>
In this case the underline will be four pixels.
No, there isn’t. The thickness of the underline is browser-dependent and cannot be affected in CSS (or HTML).
There was once a text-underline-width property suggested in the CSS3 Text draft. But there was insufficient interest in it, and it was removed from the draft in 2005. It was probably never implemented.
The usual workaround is to use a bottom border instead of an underline. However, note that it is a different thing. The bottom border is below the line box, whereas an underline is normally on the baseline of text and therefore cuts descenders of letters. Generally, a bottom border is better for legibility than an underline, but it deviates from typographic tradition.
The following example demonstrates the differences.
<span style="text-decoration: underline">jgq</span>
<span style="border-bottom: solid 1px">jgq</span>
<span style="border-bottom: solid 4px">jgq</span>
I am not recommending inline CSS but have used it here for brevity:
<h1 style="border-bottom: 5px solid black">
You may be able to achieve the same visual effect with border-bottom-width;
h2
{
border-bottom-color:black;
border-bottom-style:solid;
border-bottom-width:15px;
}
Since you don't always want border-bottom (eg, item may have padding and it will appear too far away), this method works best:
h1:after {
content: '';
height: 1px;
background: black;
display:block;
}
If you want a thicker underline, add more height
If you want more or less space between the text and the underline, add a margin-top:
h1:after {
content: '';
height: 2px;
background: black;
display:block;
margin-top: 2px;
}