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 8 years ago.
Improve this question
Hello I am new to CSS and I am using quotes in a website I am building. However I do not really want to use an image to achieve the style when I might be able to use CSS. My problem is I have no idea where to start! THIS IS THE IMAGE I WILL USE IF THE SAME EFFECT IS NOT POSSIBLE IN CSS Can somebody please show me how to achieve this
Simplest way is to create a <blockquote> element and using pseudo elements to control the quotation marks. Note: some styles are added, mainly margins and paddings, to overwrite browser styles.
body {
font-family: sans-serif;
}
blockquote {
color: #aaa;
position: relative;
display: inline-block;
padding: 0 5px;
}
blockquote p {
margin-bottom: 5px;
}
blockquote:before,
blockquote:after {
content: "“";
font-size: 70px;
font-family: "Georgia", Serif;
color: #666;
position: absolute;
left: -30px;
top: 5px;
}
cite {
float: right;
color: black;
font-size: 12px;
margin: 0;
padding: 0;
}
blockquote:after {
content: "”";
right: -30px;
left: auto;
}
<blockquote><p>a man may die, nations may rise and fall, but an idea lives on</p><cite>- John F Kennedy</cite></blockquote>
Article mentioned by #thomas should have all the relevant information you need here
Related
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 1 year ago.
Improve this question
I want to draw a line before and after the text. And I want to do these features twice. Like in the image below : How can I achieve this? I tried before and after but could not solve it. I am beginner in CSS. THanks for your time.
Something like this, with ::before and ::after pseudo-elements.
.team {
text-align: center;
position: relative;
color: darkslategray;
font-size: 2em;
}
.team-span {
display: block;
text-transform: uppercase;
font-size: 0.5em;
margin-bottom: 0.5em;
}
.team-span::before,
.team-span::after {
display: inline-block;
content: "";
width: 1.5em;
height: 0.2em;
margin: 0 0.5em;
/* the lines */
border-top: 2px solid;
border-bottom: 2px solid;
}
<h2 class="team">
<span class="team-span">Our Best Team</span> Our Team
</h2>
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 am new in CSS and HTML but I creating website where I need to cover text or picture with another one. I made example in Photoshop what exactly I need:
A solution based on css shadow:
h1 {
font-family: cursive;
text-shadow: -10px -10px 0px rgba(150, 150, 150, 1);
}
<h1>Lorem Ipsum<h1>
Online tools like : https://css3gen.com/text-shadow/ could help you to construct right text-shadow property
The code is self explanatory, Nevertheless if any question leave a comment.
Text
Using text-shadow less flexible for instance the duplicated the text will always be behind the actual text, If we want to reverse this we will have to align the shadow as the actual text and the actual text as the shadow which is a lot janky and not dynamic.
p {
margin: 2rem;
border:1px solid red;
padding:10px;
display:inline-block;
}
p:hover {
text-shadow: -5px -5px red;
}
<p>Lorem</p>
Using pseudo-element highly flexible, Can place the text anywhere, Drawback is must provide the text as an attribute or a CSS variable
p {
margin: 2rem;
padding: 10px;
display: inline-block;
position: relative;
font-size:1.3em;
}
p:before {
color: red;
position: absolute;
top: 40%;
left: 40%;
width:100%;
}
p:nth-child(1):hover:before {
content: attr(data-text);
}
p:nth-child(2):hover:before {
content: var(--data-text);
}
<p data-text="attribute">attribute</p>
<p style="--data-text:'CSS variables';">CSS variables</p>
Image:
[box] {
width: 300px;
height: 300px;
background: url(https://picsum.photos/300);
position: relative;
}
[box]:hover:before {
content: '';
background: inherit;
width: 100%;
height: 100%;
top: 25%;
left: 25%;
position: absolute;
}
<div 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 6 years ago.
Improve this question
Link: http://path.com.my/v2/gallery/
Try when you hover/mouseover one of the links in the tab, especially near EXTERIOR, ILLUMINATED, INTERIOR, PYLON , the items on the second row keep moves around.
I tried changing a few of the CSS on hover but it doesn't seems to work.
Anyone can help?
Remove float from .sortLink and use inline-block instead.
Use following css:
.sortLink {
display: inline-block;
vertical-align: top;
color: #999;
font-size: 14px;
padding: 5px 8px;
text-align: center;
text-decoration: none;
text-transform: uppercase;
font-weight: bold;
margin: 0 5px 5px 0;
transition-duration: 0.5s;
}
Solved:
margin: 0 6px 0 0 !important;
Remove the float:left; from a tag and display:inline-block;
.sortLink {
/* float:left; */
display: inline-block;
}
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 7 years ago.
Improve this question
I'm building a scalable mobile menu icon and the :after pseudo class is not working. This is intended to create 3 black lines to represent the "hamburger" menu icon. The first line is created, the second line is created using the :before pseudo class, however the :after pseudo class is not rendering, thus the third black line is not appearing.
JS Fiddle - https://jsfiddle.net/eeks1swx/
I'm not entirely sure why and I can't seem to figure it out. Any thoughts?
.hamburger {
height: 15px;
width: 20px;
position: relative;
display: block;
cursor: pointer;
box-sizing: border-box;
}
.hamburger__line:before,
.hamburger__line:after,
.hamburger__line {
position: absolute;
height: 20%;
background-color: #000;
width: 100%;
border-left: 0;
border-right: 0;
top: 40%;
}
.hamburger__line:before,
.hamburger__Line:after {
content: "";
height: 100%;
}
.hamburger__line:before {
top: -200%;
}
.hamburger__line:after {
top: 200%;
}
<div class="hamburger">
<div class="hamburger__line"></div>
</div>
.hamburger__line:before,
.hamburger__Line:after {
content: "";
height: 100%;
}
... you have an uppercase L - classes are case sensitive.
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Closed 8 years ago.
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.
Questions asking for code must demonstrate a minimal understanding of the problem being solved. Include attempted solutions, why they didn't work, and the expected results. See also: Stack Overflow question checklist
Improve this question
I want to add two triangles using pseudo elements after the text in a table header cell. You guessed it, they would represent that the column is sortable. Of course, I can do that using a background image but I want to avoid that traditional solution.
I can add one triangle using the pseudo element :after. That's easy. I cannot use pseudo element :before to add the other triangle because it is placed before the text in the "th" element. If I have to position it, using the :before pseudo element, to be placed after the text, that will not work as a generic solution because each column header has, of course, different text.
Any idea on how to get around this?
DEMO: http://jsfiddle.net/7Wfc8/
HTML
<table>
<tr>
<th>Short</th>
<th>Really much longer</th>
</tr>
</table>
CSS
th {
border: 1px solid red;
padding-right: 30px;
position: relative;
}
th:after,
th:before {
content: " ";
display: block;
height: 0;
width: 0;
border: 5px solid transparent;
position: absolute;
right: 5px;
}
th:after {
top: -2px;
border-bottom-color: lime;
}
th:before {
top: 10px;
border-top-color: lime;
}
Here's a FIDDLE
<table>
<tr>
<th>Text</th>
<th>Text</th>
</tr>
</table>
th {
width: 160px;
padding: 5px;
border: 1px solid #999;
}
th:after {
display: inline-block;
float: right;
width: 10px;
line-height: 11px;
font-family: sans-serif;
font-size: 12px;
color: #0296cc;
content: '▲ ▼';
}