-
-
-
+
diff --git a/src/layouts/Page.astro b/src/layouts/Page.astro
index 377753c..417b88f 100644
--- a/src/layouts/Page.astro
+++ b/src/layouts/Page.astro
@@ -1,7 +1,6 @@
---
import Navigation from "@/components/Navigation.astro";
import Linkstree from "@/components/Linkstree.astro";
-let title = 'This is a cool page';
---
@@ -9,17 +8,27 @@ let title = 'This is a cool page';
-
{title}
+
This is a cool website
diff --git a/src/pages/index.astro b/src/pages/index.astro
index 273b6c0..b0fa8f9 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -3,5 +3,5 @@ import Page from "@/layouts/Page.astro";
---
- I like simple and clean website!
+
diff --git a/src/pages/posts/sudo-selector-in-css.mdx b/src/pages/posts/sudo-selector-in-css.mdx
new file mode 100644
index 0000000..1dc82a9
--- /dev/null
+++ b/src/pages/posts/sudo-selector-in-css.mdx
@@ -0,0 +1,77 @@
+---
+title: 'sudo selector in css?'
+pubDate: 2024-04-19
+description: 'sudo selector in css!'
+author: 'Ankan Roy'
+layout: ../../layouts/Page.astro
+---
+
+1. **::before**:
+ - This pseudo-element inserts content before the content of the selected element.
+ - It's commonly used to add decorative elements or textual content before an element.
+ - You can define its style using CSS properties like `content`, `display`, `position`, `background`, etc.
+ - Example:
+ ```css
+ .element::before {
+ content: "Before text";
+ display: block;
+ background-color: #ccc;
+ }
+ ```
+
+2. **::after**:
+ - This pseudo-element inserts content after the content of the selected element.
+ - It's often used for decorative purposes or to add additional content to an element.
+ - Like '::before', you can style it using various CSS properties.
+ - Example:
+ ```css
+ .element::after {
+ content: "After text";
+ display: block;
+ color: red;
+ }
+ ```
+
+1. **::first-line**: This pseudo-element targets the first line of text within an element. It allows you to style only the first line, such as changing its font, color, or adding decorations.
+
+ ```css
+ p::first-line {
+ font-weight: bold;
+ color: blue;
+ }
+ ```
+
+2. **::first-letter**: Similar to `::first-line`, `::first-letter` targets the first letter of the text content within an element. It's often used for decorative purposes or for drop caps.
+
+ ```css
+ p::first-letter {
+ font-size: 150%;
+ color: red;
+ }
+ ```
+
+3. **::placeholder**: This pseudo-element targets the placeholder text in an input field or textarea. It allows you to style the placeholder text separately from the input text.
+
+ ```css
+ input::placeholder {
+ color: #999;
+ font-style: italic;
+ }
+ ```
+
+4. **::selection**: This pseudo-element allows you to style the portion of a document that has been highlighted by the user. It's commonly used to customize the appearance of selected text.
+
+ ```css
+ ::selection {
+ background-color: #ffcc00;
+ color: #333;
+ }
+ ```
+
+5. **::marker**: This pseudo-element targets the marker box of a list item. It allows you to style the bullet or numbering of list items.
+
+ ```css
+ ul::marker {
+ color: blue;
+ }
+ ```
\ No newline at end of file