Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 6 years ago.
Improve this question
How can I apply various effects, like increasing its size etc., using CSS to this arrow
https://jsfiddle.net/tnfLc58h/
So far I've been able to change its color.
HTML
<div class="down-arrow">
</div>
CSS
.down-arrow:after {
content:'\2193';
color: red;
}
edit: I want to make it responsive.
Since a pseudo element is an inline element, you need for example to give it display: inline-block (or block) for it to respond to width/height settings (though not if only to change font properties of course, as some comments assumed I meant).
.down-arrow:after {
content:'\2193';
display: inline-block; /* or block */
background: lightgray;
color: red;
height: 32px;
width: 40px;
font-size: 24px;
text-align: center;
}
<div class="down-arrow">
</div>
To increase the size of the content, you should set the font-size
Like so :
.down-arrow:after {
content:'\2193';
color: red;
font-size: 20px; // change to whatever
}
See updated EXAMPLE
Related
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 11 months ago.
Improve this question
I am wondering how are you able to create a circle button using HTML and CSS. I feel like it has something to do with border-radius after you set a proper width and height but it didnt work out like I hoped. The image below shows what it should look like.
What the button should look like
For a circle shaped button all you need to do is set your border-radius to 50%. Change the background-color of the button to white and you should be good to go. You can also set your .button height, width, font-size and font-family to mimic your desired look.
<style>
.cont {
width:100%;
height:100%;
background-color:lightgrey
;
}
.button{
width:100px;
height:100px;
border-radius: 50%;
border:none;
background-color:lightgrey;
}
</style>
<div class="cont">
<button class="button">Explore</button>
</div>
if you want a generalized solution then you can try this
HTML
<button>Explore</button>
CSS
button {
width: 100px;
height: 100px;
border-radius: 50%;
background-color: white;
}
You can adjust the width & height according to your requirement
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 2 years ago.
Improve this question
The Anchor I'm referring to is above
I understand how to create an with rounded corners with border-raidus, however not like the anchor above.
You'll have to use border-radius.
But the catch is not to use percentages but use half the height of the element in px or another unit like em or rem.
Here's some example code that could help you.
.anchor {
width: 120px;
height: 50px;
border-radius: 25px;
background: red;
color: white;
display: flex;
align-items: center;
justify-content: center;
}
<div class="anchor">Contact</div>
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 3 years ago.
Improve this question
I was wondering what the best way is to get some white space below paragraphs and other elements. I have seen man websites that have empty p-divs in the html(created by ), but this is probably bad practise, isn't it? Is it recommended to use margins in this case?
As noted in the comments, use margin styling. You can add a class to you divs and style on that, or you can add a default style to all tags of a certain type, etc.
<p class="my-paragraph">
Here is some text.
</p>
.my-paragraph {
margin: 15px;
}
or if you want to apply it to all
p {
margin: 15px;
}
And you can target different margin directions:
p {
margin-top: 15px;
margin-bottom: 20px;
margin-left: 50px;
margin-right: 15px;
}
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 5 years ago.
Improve this question
I want to bring my Sketch file to HTML/CSS in the browser.
How can I implement the white line just between the small and big text, as shown in the image below?
If don't want to include any additional html element then you can use pseduo element:after.
h2:after {
display:block;
content:" ";
width: 80px;
height: 5px;
background: grey;
margin-top: 5px;
}
fiddle
You can add an empty div with a bottom border & custom width, which is of cleaner and shorter code:
body {
background-color: blue;
color: white;
}
#mydiv {
border-bottom: 4px solid white;
width: 33%;
}
#myline {
height: 4px;
background-color: white;
border: 0px solid black;
width: 33%;
}
A div:
<div id="mydiv"></div>
A horizontal line:
<hr id="myline" />
That's 4 lines for the HR and 2 for the div, and that's without making the hr align to the left.
If you don't want to add another element you can use ::after on any element - just make it have display: block and set the color, width, height etc. similar to the above code.
You can add tag <hr> and him specify needed width, height,color...
Closed. This question is not reproducible or was caused by typos. It is not currently accepting answers.
This question was caused by a typo or a problem that can no longer be reproduced. While similar questions may be on-topic here, this one was resolved in a way less likely to help future readers.
Closed 3 years ago.
Improve this question
I have a div that refuses to change background colors when I hover over it. It stays the same. Here's the code.
HTML:
<div id="login"></div>
CSS:
#login {
position: fixed;
float: left;
background-color: none;
margin-left: 1.5%;
top: 1em;
height: 1.25em;
width: 7em;
text-align: center;
border-radius: .3em;
opacity: .5;
padding-top: 1em;
border: .18em solid gray;
}
#login:hover {
background-color: gray;
}
I had a similar problem. What I suggest is making sure there are no invisible objects over the div. This tells the program that your cursor is hovering the invisible object rather than the div with the hover element.
Works fine for me - http://jsfiddle.net/Q8A6d/
Which browser are you using? You cannot apply a
:hover
pseudo class to any elements other than <a> in older versions of IE (6 and below).
Your code appears to work properly here, so a few things could be wrong:
You might have linked your stylesheet to your HTML file improperly.
Some other CSS in the context of your project may be overriding the piece that you've given here.
You might be running into browser compatibility issues with the :hover selector or something else in your code that is breaking the styling.