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 4 years ago.
Improve this question
I'm trying to create a title where a line is 'beneath' the text as shown here
I'd look similar to a border-bottom, however I cannot figure how I'd move that by the text.
Thank you.
You can use pseudo class to generate the "border" and position it where you want.
span {
font-size: 3rem;
position: relative;
}
span:after {
content: "";
position: absolute;
width: 100%;
height: 10px;
background-color: purple;
bottom: 8px;
left: 0;
z-index: -1;
}
<span>Our Mission</span>
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 4 years ago.
Improve this question
How can I have links in my pages sides like places i colored in image below and move as page scrolls (fixed position)?
With that amount of information I can give you this much of an answer
HTML
left
right
CSS
.aside-fixed {
position: fixed;
z-index: 20;
top: 50%;
background: black;
padding: 10px;
color: white;
}
.aside-left {
left: 0;
}
.aside-right {
right: 0;
}
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 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 7 years ago.
Improve this question
See this CSS-based visualization for graphs. Any idea what is the easiest way to add directions to edges (e.g. arrows on edges)?
Wrap your <li> contents with <span> tags and style the pseudo elements to achieve a proper result. You may not use ASCII characters, backgounds or even pure CSS triangles.
http://jsfiddle.net/ndozdw00/1/
.tree li span:after{
content: "▼";
position: absolute;
left: 50%;
width: 10px;
margin-left: -5px;
top: 10px;
z-index: 100;
}
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
I have two images:
<img ng-src="image1.jpg" class="regular">
<img ng-src="image2.jpg" class="favorite">
For the second image, I am looking for a way to structure my CSS class such that a marker/symbol appears over the image (example a star for favorite or just a letter - maybe a drawing). Is there a way to do so?
As <img> element cannot have pseudo content, so you could wrap it into a <span> tag or so into the markup, and apply the pseudo content on it instead.
.favorite {
position: relative;
display: inline-block;
}
.favorite:before {
content: "\2605";
position: absolute;
left: 5px;
top: 5px;
}
<span class="favorite"><img src="//dummyimage.com/100x100"/></span>
Absolute position works.
Try:
With:
.regular {
position: absolute;
left: 0px;
}
.favorite {
position: absolute;
left: 100px;
border: 1px solid black;
}
Code here: https://jsfiddle.net/zyng2Lxj/
as image tag doesn't support after pseudoelement, what about a little jquery code like:
$(function() {
$('.favorite').after('<img src="" class="icon" />');
});
the position the image with the class as in this FIDDLE
(all credit to #Christopher Harris for his answer at Does :before not work on img elements?)
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>