Css align bullet right and keep text aligned left
I have this code which displays text and an arrow icon on the border. How do I keep the text to the left and align the arrow to the right so that it is at the end, inside the border?
i {
border: solid black;
border-width: 0 3px 3px 0;
display: inline-block;
padding: 3px;
}
.right {
transform: rotate(-45deg);
-webkit-transform: rotate(-45deg);
}
p{
border:1px solid #000;
}
<!DOCTYPE html>
<html>
<head>
<style>
</style>
</head>
<body>
<p>Right arrow: <i class="right"></i></p>
</body>
</html>
source to share
You can use float:right;
in your class .right
to get the arrow all the way to the right. Then I just added margin-top:5px;
and margin-right:5px;
to position it correctly.
i {
border: solid black;
border-width: 0 3px 3px 0;
display: inline-block;
padding: 3px;
}
.right {
float:right;
margin-top:5px;
margin-right:5px;
transform: rotate(-45deg);
-webkit-transform: rotate(-45deg);
}
p{
border:1px solid #000;
}
<!DOCTYPE html>
<html>
<body>
<p>Right arrow: <i class="right"></i></p>
</body>
</html>
source to share
If you just want the arrow to be a visual element, it would be better to use a pseudo element :after
instead of injecting non-semantic elements into HTML.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Some Title</title>
<style>
p {
border: 1px solid #000;
position: relative;
}
p:after {
content: ">";
position: absolute;
right: 0;
}
</style>
</head>
<body>
<p>Right arrow: </p>
</body>
</html>
You can find a nice unicode character for the arrow. content: "\25b6";
- arrow to the right, but not particularly exciting. unicode arrows . If your page is being used as utf-8, you can just copy and paste the character.
source to share
Alternatively, you can use combinations of position: relative
and right: 0;
that will align the arrow to the right to the right:
i {
border: solid black;
border-width: 0 3px 3px 0;
display: inline-block;
padding: 3px;
}
.right-container {
position: relative;
}
.right {
position: absolute;
right: 0;
transform: rotate(-45deg);
-webkit-transform: rotate(-45deg);
}
p{
border:1px solid #000;
}
<p class="right-container">Right arrow: <i class="right"></i></p>
This will potentially give you slightly better control over the position of the arrow, although the same could be done by manipulating the brand / addition using the technique mentioned above.
source to share