I have css:
.custom-select::after {
content: "˅";
padding: 12px 8px;
position: absolute;
right: 20px;
top: 8px;
z-index: 1;
text-align: center;
width: 10%;
height: 100%;
pointer-events: none;
}
It creates an arrow:
arrow
i want to make It wider. How can I do this with only css?
simply change ˅ with ﹀.
.custom-select::after {
content: "﹀";
padding: 12px 8px;
position: absolute;
right: 20px;
top: 8px;
z-index: 1;
text-align: center;
width: 10%;
height: 100%;
pointer-events: none;
}
Another answer using css transform scale property
transform: scale(2,1);
/* Change the scale as needed*/
Where the first parameter is the horizontal stretch and the second parameter is the vertical stretch.
Related
How can I make a dot under text using only CSS as shown in below picture?
The picture needs to be always in middle with any length of string.
Probably I need to use :before OR :after? I've tried but result was awful.
A transformed pseudo element can be used to create this:
body { text-align: center; }
.text {
display: inline-block;
vertical-align: top;
padding-bottom: 10px;
position: relative;
text-align: center;
padding: 20px 10px;
line-height: 24px;
min-width: 100px;
background: #333;
font-size: 20px;
color: #fff;
}
.text::before {
transform: translateX(-50%);
border-radius: 100%;
position: absolute;
background: blue;
bottom: 10px;
height: 8px;
content: '';
width: 8px;
left: 50%;
}
<div class="text">about</div>
.char {
display: inline-block;
position: relative;
}
.char::before {
content: '.';
display: inline-block;
position: absolute;
bottom: -0.5em;
left: 0;
text-align: center;
width: 100%;
}
After writing this question on stack i come up with idea:) Its works excatly like I want :)
How can I make a dot under text using only CSS as shown in below picture?
The picture needs to be always in middle with any length of string.
Probably I need to use :before OR :after? I've tried but result was awful.
A transformed pseudo element can be used to create this:
body { text-align: center; }
.text {
display: inline-block;
vertical-align: top;
padding-bottom: 10px;
position: relative;
text-align: center;
padding: 20px 10px;
line-height: 24px;
min-width: 100px;
background: #333;
font-size: 20px;
color: #fff;
}
.text::before {
transform: translateX(-50%);
border-radius: 100%;
position: absolute;
background: blue;
bottom: 10px;
height: 8px;
content: '';
width: 8px;
left: 50%;
}
<div class="text">about</div>
.char {
display: inline-block;
position: relative;
}
.char::before {
content: '.';
display: inline-block;
position: absolute;
bottom: -0.5em;
left: 0;
text-align: center;
width: 100%;
}
After writing this question on stack i come up with idea:) Its works excatly like I want :)
I have a button which already uses an ::after element (underneath) , but I want to add a shape/element to the right side of the div.
a {
position: relative;
display: inline-block;
padding: 15px 10px;
margin: 0 5px;
color: #222;
font-size: 0.9em;
font-weight: 700;
}
a:after {
content: "";
position: absolute;
display: inline-block;
background-color: #d11e5d;
margin: 0 auto;
height: 3px;
width: 0;
bottom: 6px;
left: 0;
right: 0;
}
a.btn-contact::before {
background: #0c0;
content: '';
display: inline-block;
float: left;
height: 10px;
width: 10px;
position: absolute;
right: 0;
top: 0;
}
button
I got it to the right of the link, but I want it to vertically align on the right
EDIT: full css/html provided. Wordpress site with .btn-contact class applied to just one button (the one I want the shape beside)
i changed a bit the html you provided ( guessing that it's what you want )
do not use float to absolute elements. it doesn't have any effect.
use top:50% which means half of li a height ( the item with position relative ) and also transform:translateY(-50%) which moves up :before width half of it's height.
these 2 styles together vertical-align in the middle the before pseudo-element
check snippet below and let me know if this is what you were looking for
li a {
position: relative;
display: inline-block;
padding: 15px 10px;
margin: 0 5px;
color: #222;
font-size: 0.9em;
font-weight: 700;
}
li a:after {
content: "";
position: absolute;
display: inline-block;
background-color: #d11e5d;
margin: 0 auto;
height: 3px;
width: 0;
bottom: 6px;
left: 0;
right: 0;
}
li.btn-contact a::before {
background: #0c0;
content: '';
display: inline-block;
height: 10px;
width: 10px;
position: absolute;
right: 0;
top: 50%;
transform:translateY(-50%)
}
<li class="btn-contact">button</li>
I'm trying to create an overlay on some links that will show a magnifying glass as an overlay when you hover over it.
For simplicity, I've created a fiddle here: https://jsfiddle.net/rw4hngvj/1/
I'm able to get the magnifying glass icon centered horizontally, but I can't center it vertically, it's always at the top of the element. I've tried setting vertical-align:middle and top:50%, but neither of those work.
One restriction I have is that I can't change the HTML at all, and I can only change the css for the :before pseudoelement.
Is there any way I can center the content of :before?
Add position:relative; to .caption:before.
You need to use the position property along with top.
Adding these properties to your :before element, should center it. (based on your current code) Explanation below.
transform: translateY(-50%);
position: absolute;
left: 0;
right: 0;
Position: absolute is KEY.
Using a combination of position:absolute, left: 0, right: 0, and margin: 0 auto (this is like saying: margin-left: auto, margin-right: auto, margin-top/bottom: 0) centers your element horizontally.
And using position: absolute, top: 50%, transform: translateY(-50%) centers your element vertically.
There are other ways to do this, but this is the quickest way that requires no modification to your current CSS.
Your final css for caption:before should look like this:
.caption:before {
content: "\f002";
font-family: 'FontAwesome';
color: #ffffff;
font-size: 2em;
top: 50%;
margin: 0 auto;
display: block;
transform: translateY(-50%);
position: absolute;
left: 0;
right: 0;
}
add position .caption:before
.caption:before {
content: "\f002";
font-family: 'FontAwesome';
color: #ffffff;
font-size: 2em;
/* vertical-align: middle; */
top: 50%;
left:50%;
margin: -16px 0 0 -16px;
display: block;
position: absolute;
}
https://jsfiddle.net/rw4hngvj/3/
a.tile
{
position: relative;
display: block;
width: 150px;
height: 150px;
background-color: green;
}
.caption
{
width: 100%;
height: 100%;
opacity: 0;
display: block;
background: rgba(0,0,0,.6);
text-align: center;
cursor: pointer;
}
.caption:hover {
opacity: 1;
}
.caption:before {
content: "\f002";
font-family: 'FontAwesome';
color: #ffffff;
font-size: 2em;
top: 0; left: 0; bottom: 0; right: 0;
display: block;
width: 1em;
height: 1em;
overflow: auto;
margin: auto;
position: absolute;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css">
<a class="tile">
<div class="caption">
</div>
</a>
<a class="tile">
<div class="caption">
</div>
</a>
If you can use flexbox, just try this one
.caption
{
width: 100%;
height: 100%;
display: flex;
justify-content:center;
flex-direction:both;
align-items:center;
opacity: 0;
background: rgba(0,0,0,.6);
text-align: center;
cursor: pointer;
}
I have a div (fixed) which acts like a pop up:
<body>
<div class="popup-container">
<div class="popup-item">
Yolowing
</div>
</div>
</body>
This css allows the container to be horizontally centered (having a 100% width makes everything behind it unclickable; thus, I set it to 1px):
.popup-container {
position: fixed;
left: 0;
right: 0;
margin-left: auto;
margin-right: auto;
width: 1px;
z-index: 9999;
}
.popup-item {
display: block;
min-width: 20px;
padding: 25px 50px;
background-color: yellow;
}
However, I am unable to center .popup-item due to the parent element .popup-container being smaller than its child. How do I center .popup-item while still being able to click it (pointer-events: none entirely disabled it)?
Vote to Close almost has it, but with the 1px width, the element doesn't get centered.
Do this instead:
.popup-container {
position: fixed;
left: 0;
right: 0;
z-index: 9999;
text-align:center;
height:0px;
}
.popup-item {
display: inline-block;
min-width: 20px;
padding: 25px 50px;
background-color: yellow;
}
This will make it centered, because the container is 100% wide. However, pointer-events:none; will allow you to click through to anything below it.
A couple of solutions.
First, you can make the child of the container centered using translateX() transform: http://jsfiddle.net/Yjz5R/. The same effect can be accomplished using negative margins, but the width for the container's child has to be set: http://jsfiddle.net/9Qmza/.
CSS:
.popup-item {
position: absolute;
min-width: 20px;
padding: 25px 50px;
background-color: yellow;
top: 0;
left: 50%;
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
}
Or second, you can make the container "immune" to click events:
Markup:
<input type = "checkbox" id = "clickToggle" />
<label for = "clickToggle">Click me</label>
<div class="popup-container">
<div class="popup-item">
Yolowing
</div>
</div>
Styles: http://jsfiddle.net/CVfHt/.
.popup-container {
position: fixed;
left: 0;
right: 0;
top: 0;
bottom: 0;
background-color: rgba(200, 200, 200, 0.5);
pointer-events: none;
}
.popup-item {
position: absolute;
min-width: 20px;
padding: 25px 50px;
background-color: yellow;
top: 50%;
left: 50%;
-webkit-transform: translateX(-50%) translateY(-50%);
transform: translateX(-50%) translateY(-50%);
pointer-events: all;
}
input[type = "checkbox"] {
display: none;
}
input[type = "checkbox"] + label {
cursor: pointer;
}
input[type = "checkbox"]:checked ~ div {
display: none;
}
Lastly, a question/comment. If you do not want the container to be visible, then why use it at all? Just keep the markup of the child and get rid of the container: http://jsfiddle.net/yvc4E/.
.popup-container {
position: fixed;
left: 0;
right: 0;
margin-left: auto; /* remove this line - unnecessary*/
margin-right: auto; /* and this line, remove */
width: 1px;
z-index: 9999;
text-align: center; /* add this */
}
.popup-item {
display: inline-block; /* change to inline-block */
min-width: 20px;
padding: 25px 50px;
background-color: yellow;
}