::after (:after) - CSS: Cascading Style Sheets
examples simple usage let's create two classes: one for boring paragraphs and one for exciting ones. ...
... examples simple usage let's create two classes: one for boring paragraphs and one for exciting ones. ...
... examples simple usage let's create two classes: one for boring paragraphs and one for exciting ones. ...
...And 9 more matches

content - CSS: Cascading Style Sheets
bined with other values */ content: normal; content: none; /* <image> values */ content: url("http://www.example.com/test.png"); content: linear-gradient(#e66465, #9198e5); /* alt text for generated content, added in the level 3 specification */ content: url("http://www.example.com/test.png") / "this is the alt text"; /* values below can only be applied to generated content using ::before and ::after */ /* <string> value */ content: "prefix"; /* <counter> values */ content: counter(chapter_counter); content: counters(section_counter, "."); /* attr() value linked to the html attribute value */ content: attr(value string); /* language- and position-dependent keywords */ content: open-quote; content: close-quote; content: no-open-quote; content: no-close-quote; /* except for normal and none...
...ywords */ content: open-quote; content: close-quote; content: no-open-quote; content: no-close-quote; /* except for normal and none, several values can be used simultaneously */ content: open-quote chapter_counter; /* global values */ content: inherit; content: initial; content: unset; syntax values none the pseudo-element is not generated. normal computes to none for the ::before and ::after pseudo-elements. <string> specifies the "alt text" for the element. this value can be any number of text characters. non-latin characters must be encoded using their unicode escape sequences: for example, \000a9 represents the copyright symbol. <image> an <image>, denoted by the <url> or <gradient> data type, or part of the webpage, defined by the element() function, denoting the content to d...
...ons will not announce it. if the content conveys information that is critical to understanding the page's purpose, it is better to include it in the main document. accessibility support for css generated content – tink explanation of wcag, guideline 1.3 – mdn understanding success criterion 1.3.1 | w3c understanding wcag 2.0 formal definition initial valuenormalapplies to::before and ::after pseudo-elementsinheritednocomputed valueon elements, always computes to normal. on ::before and ::after, if normal is specified, computes to none. otherwise, for uri values, the absolute uri; for attr() values, the resulting string; for other keywords, as specified.animation typediscrete formal syntax normal | none | [ <content-replacement> | <content-list> ] [/ <string> ]?where <content-replac...
...And 5 more matches

UI pseudo-classes - Learn web development
the required attribute, all the radio buttons will be invalid until one is selected, but only the one with the attribute assigned will actually match :required. using generated content with pseudo-classes in previous articles, we've seen the usage of generated content, but we thought now would be a good time to talk about it in a bit more detail. the idea is that we can use the ::before and ::after pseudo-elements along with the content property to make a chunk of content appear before or after the affected element. the chunk of content is not added to the dom, so is invisible to screenreaders; it is part of the document's styles. because it is a pseudo element, it can be targetted with styles in the same way that any actual dom node can. this is really useful when you want to add a visual...
...s too long: fieldset > div { margin-bottom: 20px; display: flex; flex-flow: row wrap; } the effect this has is that the label and input sit on separate lines because they are both width: 100%, but the <span> has a width of 0 so can sit on the same line as the input. now onto the generated content. ...
...an position the generated content relative to them. we then absolutely position different generated content depending on whether the form's data is valid or invalid — a green check or a red cross, respectively. to add a bit of extra urgency to the invalid data, we've also given the inputs a thick red border when invalid. note: we've used ::before to add these labels, as we were already using ::after for the "required" labels. you can try it below: notice how the required text inputs are invalid when empty, but valid when they have something filled in. the email input on the other hand is valid when empty, as it is not required, but invalid when it contains something that is not a proper email address. in-range and out-of-range data as we hinted at above, there are two other related ps...
...And 4 more matches

<input type="text"> - HTML: Hypertext Markup Language
orm elements to help the user see when their values are valid or invalid. these are :valid and :invalid. in this section, we'll use the following css, which will place a check (tick) mark next to inputs containing valid values, and a cross (x) next to inputs containing invalid values. div { margin-bottom: 10px; position: relative; } input + span { padding-right: 30px; } input:invalid+span:after { position: absolute; content: '✖'; padding-left: 5px; } input:valid+span:after { position: absolute; content: '✓'; padding-left: 5px; } the technique also requires a <span> element to be placed after the form element, which acts as a holder for the icons. this was necessary because some input types on some browsers don't display icons placed directly after them very well. making...
... input value length you can specify a minimum length (in characters) for the entered value using the minlength attribute; s...
... input value length you can specify a minimum length (in characters) for the entered value using the minlength attribute; similarly, use maxlength to set the maximum length of the entered value, in charact...
...And 4 more matches

create fancy boxes - Learn web development
f html possible, a simple element: <div class="fancy">hi! i want to be fancy.</div> ok, that's a very small bit of html, what can we tweak on that element? all of the following: its box model properties: width, height, padding, border, etc. its background properties: background, background-color, background-image, background-position, background-size, etc. its pseudo-element: ::before and ::after and some aside properties like: box-shadow, transform, outline, etc. so we have a very large playground. let the fun begin. box model tweak the box model alone allows us to do some basic stuff, like adding simple borders, making squares, etc.. it starts to get interesting when you push the properties to the limit by having negative padding and/or- margin by having border-radius larger than t...
... "ears" of our cloud */ margin : 0 100px; position: relative; background-color: #a4c9cf; /* well, actually we are not making a full circle as we want the bottom of our cloud to be flat. ...
...position: relative; background-color: #a4c9cf; /* well, actually we are not making a full circle as we want the bottom of our cloud to be flat. feel free to tweak this example to make a cloud that isn't flat at the bottom ;) */ border-radius: 100% 100% 0 0; } /* those are common style that apply to both our ::before and ::after pseudo elements. */ .fancy::before, .fancy::after { /* this is required to be allowed to display the pseudo-elements, event if the value is an empty string */ content: ''; /* we positionnate our pseudo-elements on the left and right sides of the box, but always at the bottom */ position: absolute; bottom : 0; /* this makes sure our pseudo-elements will be below the box content whatever happens. */ z-index : -...
...And 3 more matches

Linear-gradient Generator - CSS: Cascading Style Sheets
ursor: w-resize !important; } [data-resize='height']:hover { cursor: n-resize !important; } /** * main container */ #container { width: 1000px; height: 100%; display: table; margin: 0 auto; } #gradient-container { width: 450px; height: 250px; min-width: 8px; min-height: 8px; margin: 100px auto; border: 1px solid #ddd; position: relative; } #gradient-container[data-alpha="true"]:after { content: ""; width: 100%; height: 100%; background: url('images/canvas-pattern.png'); position: absolute; z-index: -1; } /** * gradient axis */ .gradient-axis { width: 125%; height: 4px; margin: -3px 0 0 0; border: 1px solid #ccc; position: absolute; top: 50%; left: 0; opacity: 0.5; } .gradient-axis[data-active='true'] { opacity: 1; z-index: 1; } .gradient-axis:after { c...
... 0.5; } .gradient-axis[data-active='true'] { opacity: 1; z-index: 1; } .gradient-axis:after { content: ""; width: 25px; height: 100%; background-color: #ccc; position: absolute; left: 0; top: 0; } .gradient-axis .gradient-line { width: 80%; height: 100%; margin: 0px auto; position: relative; } .gradient-axis .gradient-line:hover { cursor: pointer; } .gradient-axis .gradient-line:after, .gradient-axis .gradient-line:before { content: ""; width: 1px; height: 100px; background-color: #ccc; position: absolute; top: -48px; } .gradient-axis .gradient-line:after { left: -1px; } .gradient-axis .gradient-line:before { right: -1px; } .gradient-axis .gradient-point { width: 16px; height: 16px; margin: 0 0 0 -8px; top: -7px; border-radius: 50%; background-color: #fff; bo...
...ground-color: #ccc; position: absolute; top: -48px; } .gradient-axis .gradient-line:after { left: -1px; } .gradient-axis .gradient-line:before { right: -1px; } .gradient-axis .gradient-point { width: 16px; height: 16px; margin: 0 0 0 -8px; top: -7px; border-radius: 50%; background-color: #fff; border: 1px solid #999; position: absolute; z-index: 1; } .gradient-axis .gradient-point:after { content: ""; width: 6px; height: 6px; border-radius: 50%; background-color: #fff; border: 1px solid #999; position: absolute; top: 4px; left: 4px; } .gradient-axis .gradient-point:hover:after, .gradient-axis .gradient-point[data-active="true"]:after { background-color: #ccc; } .gradient-axis .rotate-point { width: 25px; height: 25px; position: absolute; top: -10.5px; right: -12...
...And 3 more matches

<input type="datetime-local"> - HTML: Hypertext Markup Language
t based on whether or not the current value is valid. we had to put the icons on a <span> next to the input, not on the input itself, because in chrome the generated content is placed inside the form control, and can't be styled or shown effectively. div { margin-bottom: 10px; display: flex; align-items: center; } label { display: inline-block; width: 300px; } input:invalid+span:after { content: '✖'; padding-left: 5px; } input:valid+span:after { content: '✓'; padding-left: 5px; } important: html form validation is not a substitute for scripts that ensure that the entered data is in the proper format. it's far too easy for someone to make adjustments to the html that allow them to bypass the validation, or to remove it entirely. it's also possible for so...
...sn't match the pattern nnnn-nn-nntnn:nn, where n is a number from 0 to 9. of course, this doesn't stop people from entering invalid dates, or incorrectly formatted dates and times. and what user is going to understand the pattern they need to enter the time and date in? we still have a problem. ...
...dates, or incorrectly formatted dates and times. and what user is going to understand the pattern they need to enter the time and date in? we still have a problem. div { margin-bottom: 10px; } input:invalid + span { position: relative; } input:invalid + span:after { content: '✖'; position: absolute; right: -18px; } input:valid + span { position: relative; } input:valid + span:after { content: '✓'; position: absolute; right: -18px; } the best way to deal with dates in forms in a cross-browser way at the moment is to get the user to enter the day, month, year, and time in separate controls (<select> elements being popular — see below for an implementation), or use javascript libraries such as jquery date picker, and the jquery timepicker plugin. the y2k38 problem...
...And 2 more matches

<input type="time"> - HTML: Hypertext Markup Language
on whether or not the current value is valid. we had to put the icons on a <span> next to the input, not on the input itself, because in chrome the generated content is placed inside the form control, and can't be styled or shown effectively. div { margin-bottom: 10px; position: relative; } input[type="number"] { width: 100px; } input + span { padding-right: 30px; } input:invalid+span:after { position: absolute; content: '✖'; padding-left: 5px; } input:valid+span:after { position: absolute; content: '✓'; padding-left: 5px; } the result here is that: only times between 12:00 and 18:00 will be seen as valid; times outside that range will be denoted as invalid. depending on what browser you're using, you might find that times outside the specified range might not ...
...mber from 0 to 9. of course, this doesn't stop people from entering invalid times, or incorrectly formatted times that follow the pattern. then there's the problem of the user having no idea exactly what format the time is expected to be in. ...
...orrectly formatted times that follow the pattern. then there's the problem of the user having no idea exactly what format the time is expected to be in. div { margin-bottom: 10px; position: relative; } input[type="number"] { width: 100px; } input + span { padding-right: 30px; } input:invalid+span:after { position: absolute; content: '✖'; padding-left: 5px; } input:valid+span:after { position: absolute; content: '✓'; padding-left: 5px; } the best way to deal with times in forms in a cross-browser way, for the time being, is to get the user to enter the hours and minutes (and seconds if required) in separate controls (<select> elements are popular; see below for an example), or use javascript libraries such as the jquery timepicker plugin. examples in this exampl...
...And 2 more matches

Pseudo-classes and pseudo-elements - Learn web development
f the first paragraph bold you could chain the :first-child and ::first-line selectors together. try editing the previous live example so it uses the following css. we are saying that we want to select the first line, of the first <p> element, which is inside an <article> element. ...
... inserting strings of text from css isn't really something we do very often on the web however, as that text is inaccessible to some screen readers and might be hard for someone to find and edit in the future. ...
... string, which can then be styled just like any element on the page. in this next example, we have added an empty string using the ::before pseudo-element. we have set this to display: block in order that we can style it with a width and height. we then use css to style it just like any element. you can play around with the css and change how it looks and behaves. the use of the ::before and ::after pseudo-elements along with the content property is referred to as "generated content" in css, and you will often see this technique being used for various tasks. a great example is the site css arrow please, which helps you to generate an arrow with css. look at the css as you create your arrow and you will see the ::before and ::after pseudo-elements in use. whenever you see these selectors, loo...
... :scope matches any element that is a scope element. :valid matches an element such as an <input> element, in a valid state. :target matches an element if it is the target of the current url (i.e. if it has an id matching the current url fragment). :visited matches visited links. pseudo-elements selector description ::after matches a stylable element appearing after the originating element's actual content. ::before matches a stylable element appearing before the originating element's actual content. ::first-letter matches the first letter of the element. ::first-line matches the first line of the containing element. ::grammar-error matches a portion of the document...

Color picker tool - CSS: Cascading Style Sheets
ll 0.2s; } #picker-samples .sample { width: 40px; height: 40px; margin: 5px; border: 1px solid #ddd; position: absolute; float: left; transition: all 0.2s; } #picker-samples .sample:hover { cursor: pointer; border-color: #bbb; transform: scale(1.15); border-radius: 3px; } #picker-samples .sample[data-active='true'] { border-color: #999; } #picker-samples .sample[data-active='true']:after { content: ""; position: absolute; background: url('https://mdn.mozillademos.org/files/6065/arrow.png') center no-repeat; width: 100%; height: 12px; top: -12px; z-index: 2; } #picker-samples #add-icon { width: 100%; height: 100%; position: relative; box-shadow: inset 0px 0px 2px 0px #ddd; } #picker-samples #add-icon:hover { cursor: pointer; border-color: #ddd; box-shadow: inset 0p...
...rg/files/6065/arrow.png') center no-repeat; width: 100%; height: 12px; top: -12px; z-index: 2; } #picker-samples #add-icon { width: 100%; height: 100%; position: relative; box-shadow: inset 0px 0px 2px 0px #ddd; } #picker-samples #add-icon:hover { cursor: pointer; border-color: #ddd; box-shadow: inset 0px 0px 5px 0px #ccc; } #picker-samples #add-icon:before, #picker-samples #add-icon:after { content: ""; position: absolute; background-color: #eee; box-shadow: 0 0 1px 0 #eee; } #picker-samples #add-icon:before { width: 70%; height: 16%; top: 42%; left: 15%; } #picker-samples #add-icon:after { width: 16%; height: 70%; top: 15%; left: 42%; } #picker-samples #add-icon:hover:before, #picker-samples #add-icon:hover:after { background-color: #ddd; box-shadow: 0 0 1px 0 #d...
...fore { content: "drop colors here to compare"; width: 40%; padding: 30px 9% 70px 11%; background-image: url('https://mdn.mozillademos.org/files/6075/drop.png'); background-repeat: no-repeat; background-position: left 35px top 60%; text-align: right; border: 3px dashed rgb(221, 221, 221); border-radius: 15px; position: absolute; top: 50px; left: 20%; } #canvas[data-tutorial='drop']:after { content: "adjust, change or modify"; width: 40%; font-size: 24px; position: absolute; top: 130px; left: 32%; z-index: 2; } #canvas [data-tutorial='dblclick'] { background-color: #999 !important; } #canvas [data-tutorial='dblclick']:before { content: "double click to activate"; width: 80px; color: #fff; position: absolute; top: 10%; left: 20%; z-index: 2; } #canvas .sample { w...
...anvas [data-tutorial='dblclick']:before { content: "double click to activate"; width: 80px; color: #fff; position: absolute; top: 10%; left: 20%; z-index: 2; } #canvas .sample { width: 100px; height: 100px; min-width: 20px; min-height: 20px; position: absolute; border: 1px solid rgba(255, 255, 255, 0.3); } #canvas .sample:hover { cursor: move; } #canvas .sample[data-active='true']:after { content: ""; position: absolute; background: url('https://mdn.mozillademos.org/files/6065/arrow.png') center no-repeat; width: 100%; height: 12px; top: -12px; z-index: 2; } #canvas .sample:hover > * { cursor: pointer; display: block !important; } #canvas .sample .resize-handle { display: none; } #canvas .sample .pick { width: 10px; height: 10px; margin: 5px; background: url('ht...

flex-basis - CSS: Cascading Style Sheets
"container"> <li class="flex flex6">6: flex-basis test</li> </ul> css .container { font-family: arial, sans-serif; margin: 0; padding: 0; list-style-type: none; display: flex; flex-wrap: wrap; } .flex { background: #6ab6d8; padding: 10px; margin-bottom: 50px; border: 3px solid #2e86bb; color: white; font-size: 14px; text-align: center; position: relative; } .flex:after { position: absolute; z-index: 1; left: 0; top: 100%; margin-top: 10px; width: 100%; color: #333; font-size: 12px; } .flex1 { flex-basis: auto; } .flex1:after { content: 'auto'; } .flex2 { flex-basis: max-content; } .flex2:after { content: 'max-content'; } .flex3 { flex-basis: min-content; } .flex3:after { content: 'min-content'; } .flex4 { flex-basis: fit-con...
... candidate recommendation initial definition ...
... candidate recommendation initial definition ...
....flex1:after { content: 'auto'; } .flex2 { flex-basis: max-content; } .flex2:after { content: 'max-content'; } .flex3 { flex-basis: min-content; } .flex3:after { content: 'min-content'; } .flex4 { flex-basis: fit-content; } .flex4:after { content: 'fit-content'; } .flex5 { flex-basis: content; } .flex5:after { content: 'content'; } .flex6 { flex-basis: fill; } .flex6:after { content: 'fill'; } results specifications specification status comment css flexible box layout modulethe definition of 'flex-basis' in that specification. candidate recommendation initial definition ...

<input type="date"> - HTML: Hypertext Markup Language
of the :valid and :invalid pseudo-elements to add an icon next to the input, based on whether or not the current value is valid. we had to put the icon on a <span> next to the input, not on the input itself, because in chrome at least the input's generated content is placed inside the form control, and can't be styled or shown effectively. label { display: flex; align-items: center; } span::after { padding-left: 5px; } input:invalid + span::after { content: '✖'; } input:valid+span::after { content: '✓'; } important: client-side form validation is no substitute for validating on the server. it's easy for someone to modify the html, or bypass your html entirely and submit the data directly to your server. if your server fails to validate the received data, disaster could strik...
...</label> <p> <button>submit</button> </p> </form> if you submit it, you'll see that the browser displays an error and highlights the input as invalid if your entry doesn't match the pattern ####-##-## (where # is a digit from 0 to 9). of course, this doesn't stop people from entering invalid dates, or incorrect formats. so we still have a problem. span { position: relative; } span::after { right: -18px; position: absolute; } input:invalid + span::after { content: '✖'; } input:valid + span::after { content: '✓'; } at the moment, the best way to deal with dates in forms in a cross-browser way is to have the user enter the day, month, and year in separate controls, or to use a javascript library such as jquery date picker. examples in this example, we create 2 sets...
... we create a new <input> element, try setting its type to date, then immediately check what its type is — unsupporting browsers will return text, because the date type...
... we create a new <input> element, try setting its type to date, then immediately check what its type is — unsupporting browsers will return text, because the date type falls back to type text. if <input type="date"> ...

<input type="month"> - HTML: Hypertext Markup Language
on whether or not the current value is valid. we had to put the icons on a <span> next to the input, not on the input itself, because in chrome the generated content is placed inside the form control, and can't be styled or shown effectively. div { margin-bottom: 10px; position: relative; } input[type="number"] { width: 100px; } input + span { padding-right: 30px; } input:invalid+span:after { position: absolute; content: '✖'; padding-left: 5px; } input:valid+span:after { position: absolute; content: '✓'; padding-left: 5px; } important: html form validation is not a substitute for scripts that ensure that the entered data is in the proper format. it's far too easy for someone to make adjustments to the html that allow them to bypass the validation, or to remove it...
... people from entering invalid dates (such as 0000-42), or incorrectly formatted dates that follow the pattern. there's also the problem that the user won't necessarily know which of the many date formats is expected. we have work left to do. ...
...t follow the pattern. there's also the problem that the user won't necessarily know which of the many date formats is expected. we have work left to do. ...
...e months, as they don't change (leaving localization out of things). the list of available year values is dynamically generated depending on the current year (see the code comments below for detailed explanations of how these functions work). div { margin-bottom: 10px; position: relative; } input[type="number"] { width: 100px; } input + span { padding-right: 30px; } input:invalid+span:after { position: absolute; content: '✖'; padding-left: 5px; } input:valid+span:after { position: absolute; content: '✓'; padding-left: 5px; } javascript the javascript code that handles selecting which approach to use and to set up the list of years to include in the non-native year <select> follows. the part of the example that may be of most interest is the feature detection cod...

<input type="search"> - HTML: Hypertext Markup Language
is too large, is of the wrong type, and so forth) is entered into your database. a note on styling there are useful pseudo-classes available for styling valid/invalid form elements: :valid and :invalid. in this section, we'll use the following css, which will place a check (tick) next to inputs containing valid values, and a cross next to inputs containing invalid values. input:invalid ~ span:after { content: '✖'; padding-left: 5px; position: absolute; } input:valid ~ span:after { content: '✓'; padding-left: 5px; position: absolute; } the technique also requires a <span> element to be placed after the form element, which acts as a holder for the icons. this was necessary because some input types on some browsers don't display icons placed directly after them ve...
...ry well. making input required you can use the required attribute as an easy way of making entering a value required before form submission is allowed: <form> <div> <input type="search" id="mysearch" name="q" placeholder="search the site..." required> <button>search</button> <span class="validity"></span> </div> </form> input { margin-right: 10px; } input:invalid ~ span:after { content: '✖'; padding-left: 5px; position: absolute; } input:valid ~ span:after { content: '✓'; padding-left: 5px; position: absolute; } this renders like so: in addition, if you try to submit the form with no search term entered into it, the browser will show a message. the following example is from firefox: different messages will be shown when you try to ...
...red value be 4–8 characters in length. <form> <div> <label for="mysearch">search for user</label> <input type="search" id="mysearch" name="q" placeholder="user ids are 4–8 characters in length" required size="30" minlength="4" maxlength="8"> <button>search</button> <span class="validity"></span> </div> </form> input { margin-right: 10px; } input:invalid ~ span:after { content: '✖'; padding-left: 5px; position: absolute; } input:valid ~ span:after { content: '✓'; padding-left: 5px; position: absolute; } this renders like so: if you try to submit the form with less than 4 characters, you'll be given an appropriate error message (which differs between browsers). if you try to go beyond 8 characters in length, the browser won't ...
.... the following example covers it: <form> <div> <label for="mysearch">search for product by id:</label> <input type="search" id="mysearch" name="q" placeholder="two letters followed by four numbers" required size="30" pattern="[a-z]{2}[0-9]{4}"> <button>search</button> <span class="validity"></span> </div> </form> input { margin-right: 10px; } input:invalid ~ span:after { content: '✖'; padding-left: 5px; position: absolute; } input:valid ~ span:after { content: '✓'; padding-left: 5px; position: absolute; } this renders like so: examples you can see a good example of a search form used in context at our website-aria-roles example (see it live). specifications specification status comment html living...

<input type="tel"> - HTML: Hypertext Markup Language
me="telno" type="tel" required> <span class="validity"></span> </div> <div> <button>submit</button> </div> </form> and let's include the following css to highlight valid entries with a checkmark and invalid entries with a cross: div { margin-bottom: 10px; position: relative; } input[type="number"] { width: 100px; } input + span { padding-right: 30px; } input:invalid+span:after { position: absolute; content: '✖'; padding-left: 5px; color: #8b0000; } input:valid+span:after { position: absolute; content: '✓'; padding-left: 5px; color: #009000; } the output looks like this: pattern validation if you want to further restrict entered numbers so they also have to conform to a specific pattern, you can use the pattern attribute, which takes as its value...
...neither will 800-mdn-rocks. however, 865-555-6502 will be accepted.
...neither will 800-mdn-rocks. however, 865-555-6502 will be accepted. this particular pattern is obviously only useful for certain locales — in a real application you'd pro...
... if it is worth going to all this trouble on the client-side, when you could just let the user enter their number in whatever format they wanted on the client-side and then validate and sanitize it on the server. but this choice is yours to make. div { margin-bottom: 10px; position: relative; } input[type="number"] { width: 100px; } input + span { padding-right: 30px; } input:invalid+span:after { position: absolute; content: '✖'; padding-left: 5px; color: #8b0000; } input:valid+span:after { position: absolute; content: '✓'; padding-left: 5px; color: #009000; } specifications specification status comment html living standardthe definition of '<input type="tel">' in that specification. living standard initial definition html...