How I can make center align my pseudo-element after? Like margin: 0 auto; for block elements.
<div>
This is test text. This is test text. This is test text.
</div>
CSS code:
div:after {
position: absolute;
display: block;
content:"";
border-color: #EAB920 transparent transparent transparent;
border-style: solid;
border-width: 2.5em;
width: 0;
height: 0;
}
It after element look like simple triangle. Property margin: 0 auto; does not work.
If you want the pseudo element centered horizontally relative to the text, you set the display of the targeted element to inline-block so that the width shrinks to fit the content. Then remove the absolute positioning from the pseudo element and margin: auto will work as expected.
Example Here
.target {
display: inline-block;
}
.target:after {
content: '';
display: block;
margin: auto;
border-color: #EAB920 transparent transparent transparent;
border-style: solid;
border-width: 2.5em;
width: 0;
height: 0;
}
<div class="target">This is test text. This is test text. This is test text.</div>
If you don't want the pseudo element centered horizontally relative to the text, don't set the element to inline-block - (example)
Related
This question already has answers here:
Thick underline behind text
(7 answers)
Closed 8 months ago.
I am trying to use a background color on text only, which works fine on single lines, but when the line breaks in responsive mode it ends up looking like this:
Does anyone know what to add to make the yellow background line follow the text on mulitple lines?
This is my code:
.background-highlight {
position: relative;
display: inline-block;
color: #faf9f4;
}
.background-highlight:after {
content: '';
position: absolute;
width: 100%;
height: 10px;
left: 0;
top: 50%;
background-color: #cef230;
z-index: -1;
}
Thanks a lot in advance,
I have used box-decoration-break: clone; property for mainting the same design for multiple lines don't forget to add display: inline; to its child where background is added. in child I have used linear gradient you can generate according to you from here. you can chenge the position of green strip by adjusting gradient values from the site.
.background-highlight {
position: relative;
display: inline-block;
color: #000;
-webkit-box-decoration-break: clone;
box-decoration-break: clone;
font-size: 120px;
}
.background-highlight span {
display: inline;
background: rgb(206,242,48);
background: -webkit-gradient(linear, left bottom, left top, color-stop(11%, rgba(206,242,48,1)), color-stop(12%, rgba(255,255,255,0)));
background: -o-linear-gradient(bottom, rgba(206,242,48,1) 11%, rgba(255,255,255,0) 12%);
background: linear-gradient(0deg, rgba(206,242,48,1) 11%, rgba(255,255,255,0) 12%);
}
<h1 class="background-highlight"><span>The skippers escape</span></h1>
It is fault of pseudo element that is forced to break between two lines.
The cause is the way the effect is carried out, pseudo element ::before creates a single rectangle that has no way of splitting up to follow words flow. Posible solutions:
Make sure links never occupy more than 1 line. You can use
white-space: nowrap;
Redesign the effect applying box border to main element. For example:
.background-highlight {
width: max-content;
border-bottom:5px solid rgb(217, 255, 0);
}
<div class="background-highlight">THE SKIPPER´S ESCAPE</div>
Pseudo-element solution
Use the bottom-positioning value on the pseudo-element instead of top. This forces the pseudo-element to be positioned at the bottom, instead of 50%from the top. I used bottom: -10px as that is the height of the pseudo-element, so it aligns perfectly.
Read more on position values: https://developer.mozilla.org/en-US/docs/Web/CSS/position
HTML-element solution
Instead of creating a pseudo-element, you could opt to make an HTML element instead.
Make a parent container, apply flex to it so the text and the line will align.
Make the .line-element a block element, so it will break into a new line.
You can still apply position: absolute and position: relative on the .line and the h2 if you want to position it in another way. Or you could simply use e.g. transform: translateY(5px) to move the line up a bit.
.background-highlight {
position: relative;
display: inline-block;
color: black;
text-align: right;
}
.background-highlight:after {
content: '';
position: absolute;
width: 100%;
height: 10px;
left: 0;
bottom: -10px;
background-color: #cef230;
z-index: -1;
}
/* Without pseudo */
.nopseudo {
display: flex;
}
.nopseudo h2 {
text-align: right;
}
.nopseudo .line {
height: 10px;
width: 100%;
background-color: #cef230;
display: block;
}
<h2 class="background-highlight">The Skippers <br>Escape</h2>
<div class="nopseudo">
<h2>The Skippers <br>Escape<span class="line"></span></h2>
</div>
I don't know how is your structure but this might help.
We just need two div elements, one as a container to setup the width property and the text holder in this case I will use a h2 tag.
Just mkae the ::after pseudo element as display and the .background-highlight's width can be width: match-content or 100% in this case if you just want to cover the text use match-content if you want to cover the width of the .title element use 100%
.title {
width: 90vw;
text-align: end;
}
h2 {
text-transform: uppercase;
color: #374650;
}
.fullwidth {
width: 100%;
}
.match {
width: match-content;
}
.background-highlight {
position: relative;
display: inline-block;
}
.background-highlight:after {
content: '';
display: block;
width: 100%;
height: 10px;
background-color: #cef230;
z-index: -1;
}
<div class="title">
<h2 class="match background-highlight">
The Skipper's <br>Escape</h2>
</div>
<div class="title">
<h2 class="fullwidth background-highlight">
The Skipper's <br>Escape</h2>
</div>
I'm trying to get a ribbon-like banner effect for a header:
My markup is this:
<header>
<div id="logo">
<img src="">
</div>
</header>
I was thinking I could use pseudo :before and :after elements on the <img>, creating extra white space above and below the image to fake the extended `div:
#logo-wrap img:after {
content: '';
display: inline-block;
position: absolute;
left: 10px;
top: 10px;
width: 100px;
height: 100px;
background-color: #000;
}
And then another :before and :afterpseudo elements for the "shadow-fold".
My problem is: if I end up doing it like this, I'll have to insert another div between #logoand <img> in order to add another pair of :before and :after pseudo elements for the bottom "shadow-fold" and I think I'm having problems using the pseudo elements on the <img> element (nothing is appearing).
Can you shed some light and guide me on the right direction, pls? Perhaps, there is a simple way to just "shrink" the <header>?
EDIT
So, :before and :after can't be used with <img>. Thank you for the info :)
What I would like to know is if there is another way to achieve what I desire instead of wrap-wrap-wrap? :P
i.e: is there a way to make the #logo be bigger than <header> despite being its child and its height being the same (since the <header> has always the same height as the <img>)?
Thanks
I think you're on the right track. I would use borders, but I would make your pseudo-elements be behind the logo like so:
body,html {margin: 0; padding: 0;}
header {
background: #eee;
text-align: center;
margin: 1em 0;
}
#logo {
display: inline-block;
vertical-align: top;
position: relative;
margin: -0.5em 0;
}
#logo:before, #logo:after {
content: '';
position: absolute;
width: 100%;
left: -0.25em;
border: 0 solid transparent;
border-width: 0.5em 0.25em;
color: #aaa; /* set so we only have to have the border color in one place.
if not specified, border color is the same as the text
color. */
}
#logo:before {
border-top: none;
border-bottom-color: initial;
top: 0;
}
#logo:after {
border-bottom: none;
border-top-color: initial;
bottom: 0;
}
#logo img {
position: relative;
display:block;
z-index: 1;
}
<header>
<div id="logo">
<img src="//placehold.it/300x100?text=LOGO"/>
</div>
</header>
The concept is that the pseudo-elements are 100% width of the logo with a little bit extra (determined by the border attributes). Then you use both left and right borders simultaneously. There's a few other tricks in that code that help simplify it, but the general idea is to let your pseudo-elements peek out from behind the logo itself.
I made a span in a div. This span is only a black border, positioned above the div.
I want this span (black border) adapts to the div width and height. Like a border in interior to this div.
My problem is that border exceed the div : http://jsfiddle.net/QHRYJ/
div {
background: pink;
width: 300px;
height: 200px;
}
span {
position: absolute;
width: inherit;
border: 4px solid;
margin: 10px;
height: inherit;
}
-->-->-->-->
*EDIT : what I want : http://www.hostingpics.net/viewer.php?id=623039div.png*
The comments speak for themselves, however, if you still want to achieve it your way:
div {
position: relative;
background: pink;
width: 300px;
height: 200px;
}
span {
position: absolute;
top:0 ;
left: 0;
right: 0;
bottom: 0;
border: 4px solid;
}
You need to give your parent div a position so its child elements orientate themselves on its parent. Then, as your span is absolutely positioned, you can just expand it by explicitly setting left, right, bottom and top to 0.
If you want to have a spacing between span and div, add margins to the span.
I think you have an XY Problem here.From what you've described in the comments (adding a border to the <div> on hover), you don't need a <span> element for that. You can achieve this using the :hover pseudo-selector. For example:
div:hover {
border: 4px solid #000
}
Here's a jsFiddle Demo
You might want to specify box-sizing on the <div> to prevent it from resizing:
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
Due to browser performance implications I can't use box-shadow CSS property because I have many similarly looking elements on my page that should have same looking style including shadow. That's the reason I would like to implement shadows using traditional PNG imagery.
Facts
My elements have predefined and more importantly fixed pixel width
They have fluid height (auto) depending on their content
They have content directly in the element and some child elements will be positioned outside their border
CSS3 can be used but performance-critical parts (gradients, shadows...) should be avoided
CSS pseudo elements can be used without limitation
Requirements
There should be no additional wrapper element added in order to have fluid shadow
Application should run smoothly on mobile browsers - shadows seem to slow down performance significantly on mobile devices since their processing power is much lower than desktop computers.
Possible direction
I thought of using :before and :after pseudos to display top-to-bottom and bottom shadows on the containing element, but these pseudos display within their parent element and positioning parent z-index higher than these children has no effect.
Visual demo of end result
This JSFiddle Demo in pure CSS3 that I would like to achieve but using PNG shadows. In reality there are numerous of these boxes so you can imagine mobile browsers are struggling with all these shadows.
Item is one such box (see blow) that needs PNG shadow. Left menu is child element positioned outside of the box.
Display in Chrome
HTML
<div class="item">
<menu>
<li>Yes</li>
<li>No</li>
<li>Maybe</li>
</menu>
<div class="content">
Some content
</div>
</div>
CSS3 LESS
.item {
position: relative;
width: 300px;
background-color: #fff;
box-shadow: 0 0 10px #ccc;
margin: 20px 20px 20px calc(20px + 3.5em);
min-height: 5em;
&:first-child {
margin-top: 0;
}
&:after {
content: "";
position: absolute;
top: 0;
left: 0;
width: 10px;
height: 5em;
background-color: #fff;
}
menu {
position: absolute;
top: 0;
left: -3.5em;
width: 3.5em;
margin: 0;
border: 0;
padding: 0;
list-style: none;
background-color: #fff;
box-shadow: 0 0 10px #ccc;
li a {
display: block;
text-align: center;
padding: 2px 0;
}
}
.content {
padding: .75em 1em;
}
}
Probably I am missing something, but looks like you want something in this way:
demo
The CSS is
.base {
width: 300px;
height: 150px;
font-size: 100px;
font-weight: bolder;
background-color: lightgreen;
position: relative;
z-index: auto;
}
.base:after {
content: '';
position: absolute;
top: 30px;
left: 30px;
background-color: green;
z-index: -1;
width: 100%;
height: 100%;
}
.child {
position: absolute;
left: 150px;
top: 50px;
border: solid 1px black;
color: red;
}
And just change the background of the :after to your image.
I have applied this solution to your fiddle.
The relevant CSS is for the before pseudo element:
.item:before {
content: "";
position: absolute;
top: -10px;
left: -10px;
right: -10px;
bottom: -10px;
z-index: -1;
background-image: url(http://placekitten.com/100/100);
background-repeat: no-repeat;
background-size: 100% 100%;
}
I have used a kitten picture, that is being scaled to cover all the needed size. Just change that to whatever you want.
I needed to do it that way because I had onky a pseudo element available.
The key for that to work (and where you probably had the difficulty) is to add z-index: auto to .item
Updated demo
Well, I had said that it wasn't posible, but I have find a way.
The standard technique would be to use 2 elements, just to avoid stretching the image (as you said). The problem is that we only have 1 pseudo element available.
The solution then would be to use 1 pseudo element, but with 2 backgrounds, to solve the issue.
CSS (only relevant part)
.item:before {
background-image: url(http://placekitten.com/320/10), url(http://placekitten.com/320/500);
background-repeat: no-repeat;
background-size: 100% 9px, 100% calc(100% - 9px);
background-position: left bottom, left top;
}
We will need an image (the first one) only 10 px in height, to cover the bottom shadow. And another one, with enough height to cover the maximumitem posible, and that will be used for the remaining part of the shadow. The dark part is that we need now a calc() height, with limited support. (anyway, better than border image)
demo 3
I have an <li> which is constrained in width and the height is set to an aspect ratio of 1:1.
I then have an element inside which is positioned absolutely with a 100% width and height. I then add an icon font to the :before pseudo element. How can I vertically center that pseudo element?
My code is:
li
+span-columns(1, 6)
a
+border-radius(50%)
display: block
position: relative
width: 100%
border: 5px solid $bright-blue
border: remCalc(5px) solid $bright-blue
&:before
padding-top: 100%
content: ''
display: block
span
display: block
position: absolute
top: 0
left: 0
width: 100%
height: 100%
&:before
// Content is added via the style for data-icon
display: inline-block
min-height: 100%
vertical-align: middle
width: 100%
color: $white
font-size: 32px
text-align: center
outline: 1px solid red
A pic of the problem. The red outline is on the span:before
COMPILED OUTPUT:
li {
width: 150px;
}
li a {
border-radius: 50%;
display: block;
position: relative;
width: 100%;
border: 5px solid blue;
}
li a:before {
padding-top: 100%;
content: '';
display: block;
}
li a span {
display: block;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
li a span:before {
content: attr(data-icon);
font-family: 'IconFont';
display: inline-block;
min-height: 100%;
vertical-align: middle;
width: 100%;
color: white;
font-size: 32px;
text-align: center;
outline: 1px solid red;
}
I'v created a fiddle with a solution for you.
Here: http://jsfiddle.net/avrahamcool/h3e2G/
your span is called Content in my fiddle, and I've add a new span called Centerer.
also, I centered some text in the layout, but you can change it back to your logo without noticing any differnce.
the main ideads are:
fix the height of the li (you already fixed the width, and if it should be a circle, I dont see a problem with also fixing the height).
lossing the relative and ablsolute way
instead of centering the text inside the span (while the span was height:100%), we center the span inside his holder.
Had to solve this with top padding like so:
$half-width: space(1, 6) / 2
$half-font: remCalc(33px) / 2
$border-widths: remCalc(5px)
+rem(padding-top, $half-width - $half-font - $border-widths)
That gives me custom top padding in rems depending on the width of the circle at the time and it scales perfectly when the body font size is increased or decreased.