# Element: pseudo() method



.

The **`pseudo()`** method of the [Element](https://developer.mozilla.org/en-US/docs/Web/API/Element) interface returns a [CSSPseudoElement](https://developer.mozilla.org/en-US/docs/Web/API/CSSPseudoElement) object representing the [CSS](https://developer.mozilla.org/en-US/docs/Web/CSS) [pseudo-element](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Selectors/Pseudo-elements) of the specified type associated with the element.

Provided its `type` parameter contains a valid pseudo-element type, `pseudo()` will always return a `CSSPseudoElement` instance, even if that pseudo-element hasn't been generated on the calling element.

## Syntax

```js-nolint
pseudo(type)
```

### Parameters

- `type`
  - : A string representing the type of pseudo-element to return a representation of. Valid values are:
    - [::after](https://developer.mozilla.org/en-US/docs/Web/CSS/%3A%3Aafter)
    - [::before](https://developer.mozilla.org/en-US/docs/Web/CSS/%3A%3Abefore)
    - [::marker](https://developer.mozilla.org/en-US/docs/Web/CSS/%3A%3Amarker)

### Return value

A [CSSPseudoElement](https://developer.mozilla.org/en-US/docs/Web/API/CSSPseudoElement) object instance, or `null` if `type` is not equal to a valid pseudo-element type.

## Examples

### Basic usage

In this example, we demonstrate basic usage of the `pseudo()` method.

#### HTML

We include a [p](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/p) element containing text, and an [output](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/output) element to log output from JavaScript.

```html live-sample___basic
<p>New York's hottest club is...</p>
<output></output>
```

#### CSS

We give the `<p>` element's [::after](https://developer.mozilla.org/en-US/docs/Web/CSS/%3A%3Aafter) pseudo-element some [content](https://developer.mozilla.org/en-US/docs/Web/CSS/content) and apply some basic styles to both.

```css hidden live-sample___basic
body {
  width: 80%;
  margin: 0 auto;
}
```

```css live-sample___basic
p {
  background-color: violet;
  padding: 20px;
}

p::after {
  content: "Crease";
  background-color: cadetblue;
  padding: 20px;
}
```

#### JavaScript

In our script, we grab references to our `<p>` and `<output>` elements, and retrieve a `CSSPseudoElement` representing the `<p>` element's `::after` pseudo-element via the `pseudo()` method. We then log some details of the pseudo-element to our `<output>` element. We also include some rudimentary error handling via a [`try...catch`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/try...catch) structure, to print an error message in non-supporting browsers.

```js live-sample___basic
const pElem = document.querySelector("p");
const output = document.querySelector("output");

try {
  const pseudoElem = pElem.pseudo("::after");
  output.textContent = `${pseudoElem.type} pseudo-element. Parent: <${pseudoElem.parent.tagName.toLowerCase()}>`;
} catch (e) {
  output.textContent = `Your browser doesn't support CSSPseudoElement and/or the pseudo() method: ${e}`;
}
```

#### Result

## Specifications

## Browser compatibility

## See also

- [CSSPseudoElement.pseudo()](https://developer.mozilla.org/en-US/docs/Web/API/CSSPseudoElement/pseudo)