https://github.com/oslego/data-text-content

Small JavaScript component to clone an element's text content to a data attribute on itself.
https://github.com/oslego/data-text-content

Last synced: about 1 month ago
JSON representation

Small JavaScript component to clone an element's text content to a data attribute on itself.

• Host: GitHub
• URL: https://github.com/oslego/data-text-content
• Owner: oslego
• Created: 2015-01-19T23:52:08.000Z (almost 10 years ago)
• Default Branch: master
• Last Pushed: 2015-01-19T23:55:26.000Z (almost 10 years ago)
• Last Synced: 2024-10-14T12:49:07.719Z (3 months ago)
• Language: JavaScript
• Size: 113 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# data-text-content

JavaScript component to clone an HTML element's text content to a data attribute called `data-text-content`. Keep in sync automatically.

For use in CSS as content for pseduo-elements with `content: attr(data-text-content)`.

## Example

```html

  /* create reflection effect */

  p::after{

      content: attr(data-text-content);

      transform: rotateX(180deg);

      display: block;

  }

Reflect this


```

## Usage

1.  Load the JavaScript component

```html

```

2.  Set the `data-text-content` attribute on target elements

```html

Reflect this

```


The target elements will have their `data-text-content` attribute automatically updated and synchronized with the element's text content.

In CSS, you can reference the `data-text-content` attribute and use its value. For example, as content for pseduo-elements:

```css

p::after{

  content: attr(data-text-content);

}

```