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 2 years ago.
Improve this question
I want to create a partial border around these different font headings. How can i create these, please help. I have tried everything but nothing is working. Sorry, noob here
You can't do that with border-top: 10px but you can use pseudo elements like that:
div{
width: 150px;
height: 100px;
background-color: lightgrey;
border-bottom: 5px solid grey;
border-right: 5px solid grey;
}
div:before{
content: '';
width: 70px;
height: 5px;
background-color: grey;
position: absolute;
left: 90px;
}
<div></div>
To be more specific, add :after or :before on your div and add what I added on my example and you can change the height/width/color and make sure to add position:absolute and add some specific properties like top, left..., to position that line where you want.
Related
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 3 years ago.
Improve this question
Good morning. I am starting with HTML but I did not find why we can use a few class names in one element like at this screenshot. Here's 3 class names in one element
You can have as many classes as you want, and they will show as long as there's a corresponding CSS declaration for it. If there isn't one, you can still assign class to the HTML
.square {
width: 120px;
height: 120px;
}
.blue {
color: blue;
}
.red {
background-color: red;
}
.bordered {
border: solid black 3px;
}
.round {
border-radius: 10px;
}
<div class="square blue red bordered round this-class-is-not-here">Hello there </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 5 years ago.
Improve this question
Hi everyone. I am new to HTML and CSS and I want to create something like the figure in the picture. The two rectangles are divs and I want the left div has a little triangle protruding onto the div on the right.
I would appreciate any help and suggestions.
/**** Edit ****/
Seems like what I am looking for is pseudo-elements! I do not want the triangle to interfere with the content of the right div.
My English is limited so I did not know how to phrase what I want in a Google search.
Thanks a lot for everything!!
You can use a pseudo element :after to add your triangle like this:
.arrow_box {
position: relative;
background: #888;
width: 300px;
height: 300px;
}
.arrow_box:after {
left: 100%;
top: 50%;
border: solid transparent;
content: "";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
border-color: rgba(0,0,0,0);
border-left-color: #888;
border-width: 30px;
margin-top: -30px;
}
<div class="arrow_box"></div>
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 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 7 years ago.
Improve this question
Can some one explain the following css code I found in a web page and which element does the section.positioned affect?
section {
position: relative;
border: 1px solid #000;
padding-top: 37px;
background: #500;
}
section.positioned {
position: absolute;
top: 100px;
left: 100px;
width: 500px;
box-shadow: 0 0 15px #333;
}
Part of web page code
<section class="">
<div class="container">
......
</div>
</section>
The section.positioned rule target an element like this:
<section class="positioned">
</section>
By changing the existing html section element's class from empty to "positioned", the section.positioned rule will apply to the element instead of the section rule.
Added:
What section.positioned really means is it target an element of type "section" which has a class named "positioned".
Further reading about css selectors:
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Selectors
What does the dot mean in CSS?
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 8 years ago.
Improve this question
how to put arrow sign on submit button without an image..
arrow next to your text, will be
TEXT →
and will look like:
TEXT →
From looking at:
http://dev.w3.org/html5/html-author/charref a complete list of symbols you can create from HTML entities (symbols made from HTML special characters).
By using Pseudo element
button{position: relative; margin: 40px}
button:before{
content: '';
position: absolute;
width: 0;
height: 0;
border-top: 10px solid transparent;
border-left: 10px solid red;
border-bottom: 10px solid transparent;
right: -20px;
top: -1px;
}
<button>ENTER</button>
Or use Character Entity Reference Chart
<button>ENTER ▸ </button>