Double Field: Format fields css

Is it possible to format the fields with css please? Example 'first sub-field' is h3?

Yes, it's possible but h3 is not about CSS but HTML. You need to override double-field-item.html.twig in our theme.

1. Copy the template from the module to your theme.
2. Change the markup as you need. It could be something like this.

{% if item.first %}
  <h3>{{ item.first }}</h3>
{% endif %}
{% if item.second %}
  <div>{{ item.second }}</div>
{% endif %}

Unfortunately this will be applied to all double field instances on a site. If you need to style double fields differently then you need to add a custom theme suggestion based on field name.

/**
 * Implements hook_theme_suggestions_HOOK_alter().
 */
function THEME_NAME_theme_suggestions_double_field_item_alter(array &$suggestions, array $variables) {
  $field_name = $variables['elements']['#item']->getFieldDefinition()->getName();
  $suggestions[] = 'double_field_item__' . $field_name;
}

Sorry, I omitted them in the previous snippet.

{% if item.first %}
  <h3>{{ item.first|nl2br }}</h3>
{% endif %}
{% if item.second %}
  <div>{{ item.second|nl2br }}</div>
{% endif %}

Not sure if understand this. Anyway you can render links in the Double Field template same way.

Something like this.

{% if item.second matches '~^https?://.+$~' %}
  <a href="{{ item.second }}">{{ item.first }}</a>
{% else %}
  <span>{{ item.first }}</span>
{% endif %}

Double Field does not support this. However, if you have Twig Tweak module installed it's possible to apply text formats to the field value.

1. Install Twig Tweak module
2. Navigate to Home -> Administration -> Configuration -> Content authoring -> Text formats and editors.
3. Select format you want to use for the field or create a new one.
4. Make sure "Convert URLs into links" filter is enabled for the selected format.
5. Apply check_markup filter to the double field value as follows.

{{ item.second|check_markup('text_format_id') }}

Instead of 'text_format_id' use a real ID of the text format, i.e. 'restricted_html'.

Double Field 4.0 has just been released.
It does support theme suggestions based on field name. For example, if the field is named "field_example" the appropriate item template would be "double-field-item--field-example.html.twig".

Here is a guide about locating template files.
https://www.drupal.org/docs/theming-drupal/twig-in-drupal/locating-templ...

Hoping that the following will be available

There is no UI for that cases but it can be easily done in the item template. Basically, it contains two variables that can be used to construct whatever markup you want. Of course that requires some very basic knowledge of Twig and HTML.
As of social networks it could be done like that. Assuming that the first subfield holds the name of the social network, i.e. facebook. twitter, etc.

<a href="{{ item.second }}" aria-label="{{ item.first }}">
  <img src="path/to/icons/{{ item.first }}.svg" alt="{{ item.first }}"/>
</a>