CSS: Horizontal lines
Underlining is often used to boost text. It shows the importance of the current word or text (and it's also often used to show links in a document). Another means of styling text is to use strike-through to show a piece of text that is wrong, e.g., "Don't do this or that."
The text-decoration property with three basic properties is used for this kind of text modification:
underline- underline textline-through-Redraw textoverline- overline text
The none value is used to remove underscores from links. This is often used to remove the underscore from links, which are there by default
<a href="#">Ordinary link underlined by default</a>
<a href="#" class="text-decoration-none">Non-underlined link</a>.text-decoration-none {
text-decoration: none;
}
Instructions
Add a paragraph with the class set to line to the editor and set it to have underlined text. Add styles to the <style> tag
If you've reached a deadlock it's time to ask your question in the «Discussions». How ask a question correctly:
- Be sure to attach the test output, without it it's almost impossible to figure out what went wrong, even if you show your code. It's complicated for developers to execute code in their heads, but having a mistake before their eyes most probably will be helpful.
CSS: Horizontal lines
Underlining is often used to boost text. It shows the importance of the current word or text (and it's also often used to show links in a document). Another means of styling text is to use strike-through to show a piece of text that is wrong, e.g., "Don't do this or that."
The text-decoration property with three basic properties is used for this kind of text modification:
underline- underline textline-through-Redraw textoverline- overline text
The none value is used to remove underscores from links. This is often used to remove the underscore from links, which are there by default
<a href="#">Ordinary link underlined by default</a>
<a href="#" class="text-decoration-none">Non-underlined link</a>.text-decoration-none {
text-decoration: none;
}
Instructions
Add a paragraph with the class set to line to the editor and set it to have underlined text. Add styles to the <style> tag
If you've reached a deadlock it's time to ask your question in the «Discussions». How ask a question correctly:
- Be sure to attach the test output, without it it's almost impossible to figure out what went wrong, even if you show your code. It's complicated for developers to execute code in their heads, but having a mistake before their eyes most probably will be helpful.
Your exercise will be checked with these tests:
const { test } = require('tests');
test(({ query, expect }) => {
const element = query(document, 'p');
expect(element).to.have.class('line');
const style = getComputedStyle(element);
expect(style).to.have.property('text-decoration', 'underline');
});Teacher's solution will be available in:
20:00
